浅谈如何优雅处理JavaScript异步错误

try/catch基本上是大家最常和async/await一起使用的,基本上我们会用它去包围大部分的异步方法。await关键字后面的promise一旦reject了,就会抛出一个异常错误。

run(); async function run() { try { await Promise.ject(new Error('Oops!')); } catch (err) { console.error(error.message); } }

try/catch同样也可以处理同步的错误,比如下面:

async function run() { const v = null; try { await Promise.resolve('foo'); v.thisWillThrow; } catch (error) { // 会出现"TypeError: Cannot read property 'thisWillThrow' of null" console.error(error.message); } }

好像我们只要无脑把逻辑都放到try/catch里面就万事大吉了吗?不太准确,下面的代码却会导致unhandled promise rejection。这个return关键字直接返回就错误却不会被捕获:

async function run() { try { // 直接返回Promise,而不是用await关键字 return Promise.reject(new Error('Oops!')); } catch (error) { console.error(error.message); } }

一种处理方式是使用return await来解决。

try catch捕获不了回调函数。try catch 仅仅在单一执行环境中奏效。是在回调中加入try catch 来捕获错误。

setTimeout(funciton() { try { fn() } catch (e) { // handle error } })

这是奏效的。 不过try catch会在各个地方。 V8引擎是不鼓励try catch在函数中的使用的。 之前把try catch移到顶层来捕获调用栈的错误,但这个对异步代码不会奏效。

2. Golang-style(then)

golang style即使用.then()的方法来将一个promise转换为另一个处理完错误的reject promise。可以使用类似if(err)来进行检查:

async function throwAnError() { throw new Error('Opps!'); } async function runAwait() { let err = await throwAnError(); if (err){ console.error(err.message); } }

这么写会直接抛出异常,因为这个方法抛出了异常,但是该方法本身没有用try/catch捕获。很多时候,我们在使用第三方库的时候可能会出现这种情况。

then()解决方法

async function runAwait() { let err = await throwAnError().then(() => null, err => err); if (err){ console.error(err.message); } }

then()的方式,就会等待promise状态resolve或reject后然后执行相应的回调,然后判断err对象并处理,所以其实它相当于被捕获了。

同时返回错误和值

async function run() { let [err, res] = await throwAnError().then(v => [null, v], err => [err, null]); if (err){ console.error(err.message); } console.log(res) }

结果:这么做可以通过解构返回一个数组,包含了结果和error对象。当然如果是reject就会返回null和error对象;而如果resolved返回数组的第一个error对象就为null,第二个就是结果。

优缺点

优点:这种模式可以更简洁地处理,同时可以不需要写catch。
缺点1:这是非常重复性的,每次执行异步操作都需要去判断error对象。
缺点2:无法帮助处理run方法中的同步错误。

所以这种方式需要谨慎使用。

3. Catch捕获

上面两种模式都可以处理异步错误,但是对于错误处理,最好的情况是在异步逻辑的最后加上catch,这样可以保证所有错误都被捕获到。其实这也是一个原则,即统一处理错误,而不是单独去处理每个错误

async function run() { return Promise.reject(new Error('Oops!')); } run().catch(function handleError(err) { console.error(err.message); }).catch( err => { process.nextTick(() => { throw errl}); })

使用catch捕获错误,如果handleError本身也有错误,就需要再catch一遍,但是为了避免回调地狱,如果该方法发生了错误就终止该进程。

优缺点

使用catch的话,不管异步方法本身是否捕获错误,它都会去捕获异步错误。

使用try/catch无法避免catch本身抛出异常,而如果它抛出了那除了嵌套多一层try/catch外,最好的做法就是加catch来让代码更简洁。

4  全局错误捕获

4.1 浏览器全局错误捕获

浏览器全局处理基本上就是依靠事件,因为浏览器是事件驱动的。一旦抛出错误,解释器在执行环境上下文中停止执行并展开,此时会有一个onerror全局事件抛出:

window.addEventListener('error', function (e) { var error = e.error; console.log(error); })

全局错误处理器会捕获任何在执行环境中发生的错误,即便是不同的对象发生的错误事件,或者是各种类型的错误。这是全局集中处理错误的一种常见方式。

调用栈

调用栈在定位问题的时候十分重要,我们可以使用调用栈在处理器中处理特定的错误。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/604eac3d42e6f2f6be9d10caa9d4339d.html