Promise 和 async/await 的异常处理,原来还有这种坑!

更新日期: 2022-03-08阅读: 1.5k标签: 异常处理
以下文章来源于TypeScript全栈开发 ,作者k8w
Promise 和 async/await 在 JavaScript、TypeScript 中已经很常见了,但你有遇到过这个报错吗?
Uncaught (in promise)

这篇文章为你分析此类问题的成因和解决办法。

先看一个典型的例子

function getList(){
return new Promise((rs,rj)=>{
rj('假装发生了错误')
})
}

try{
getList();
}
catch(e){
alert('遇到了些许错误哦~')
}

一看就是有经验的攻城狮,使用try...catch...捕获异常,发生错误时显示友好的提示。

emmm……可是实际会发生什么呢?

答案是,此处的异常将无法捕获到!当getList()抛出异常后,嗯,流程就失控了。

Promise的异常捕获方式

打开控制台会发现,上面的例子将会抛出 Uncaught (in promise)异常。

这里要提到Promise的异常处理流程。

Promise创建时需要传入一个function,在这个function执行过程中,如果出现了异常则会对外抛出。外部有2种方式来捕获这个异常:

方式一:catch()

let promise = new Promise(...);
promise.catch(e=>{
// TODO sth with e
})

方式二:async/await中的try...catch...

let promise = new Promise(...);
async function test(){
try{
await promise;
}
catch(e){
// TODO sth with e
}
}

全局异常

如果这两种方式都没有出现,则异常将会被视为 “Uncaught (in promise)” 被抛出到全局去。在NodeJS中,你可以通过process.on('unhandledRejection', e => {...})来捕获全局异常。遗憾的是,在浏览器中,尚未发现有效的方式能捕获此类全局异常。所以应当极力避免出现全局异常的情况,尤其是在前端,可能由异常导致流程中断。

只要Promise的异常被方式一或方式二捕获,就不会抛出全局异常!

未捕获异常的原因

例子中的Promise异常未被正常捕获,是因为promise虽然出现在try...catch...中,但是并没有被await,如此将不进入上述的异常捕获流程,一旦出现异常并且没有其它有效的catch时,就将抛出至全局。

嗯,看起来似乎你已经了解了,那么把例子1按如下修改一下,你觉得是否可以正常工作呢?

function getList(){
return new Promise((rs,rj)=>{
rj('假装发生了错误')
})
}

async function main(){
try{
getList();
}
catch(e){
alert('遇到了些许错误哦~')
}
}

main();

依旧不行!因为 Promise 虽然出现在了 async 方法中,但由于没有被 await,所以其异常视为全局异常。

此处有神坑!请注意!

new Promise(rs=>{
throw new Error('Error')
}).catch(e=>{
console.log('异常被捕获到了1')
})

new Promise(async rs=>{
throw new Error('Error')
}).catch(e=>{
console.log('异常被捕获到了2')
})

上面2个 Promise 里的异常,能被捕获到吗?

答案是第一个 Promise 里的异常能被捕获,因为 Promise 里同步抛出的异常,也会被视为Promise.reject。但第二个 Promise,由于里面的函数是 async 的,异常是异步抛出的,所以并不会触发 Promise 的 reject ,因此 Promise.catch 也就捕获不到。

怎么理解呢?换个方式可能好理解一些。 async 函数本身,就是 Promise 的另一种写法,二者一定能够互相转化且等效。转化成Promise的等效写法就是:

new Promise(rs=>{
// async 相当于同步函数里又包了一层Promise
return new Promise(()=>{
// 内层Promise抛出异常
throw new Error('Error')
})
}).catch(e=>{ // 这里catch的是外层Promise
// 由于异常并未向上抛给外层Promise,所以此处catch不到
console.log('异常被捕获到了2')
})

如之前所述,Promise 内抛出的异常,无论身在何处,只要未经捕获,就会直接上升为全局“未经捕获的异常”,而不是层层抛出。

小测试

嗯,如果你已经了解了这些重要的区别,那么用下面的例子测试一下吧~

看看下面的例子,getList()中的异常能被捕获到吗?

  • 如果能,将在哪个位置被捕获到?

  • 如果不能,又是为什么呢?

将你的答案留在评论处吧~~

async function getList(){
new Promise((rs,rj)=>{
rj('假装发生了错误')
});
}

async function main(){
try{
await getList().catch(e=>{
console.log('异常捕获到了,位置1')
});
}
catch(e){
console.log('异常捕获到了,位置2')
}
}

main();

链接: https://www.fly63.com/article/detial/11245

JavaScript的异常处理

Javascript 引擎是单线程的,因此一旦遇到异常,Javascript 引擎通常会停止执行,阻塞后续代码并抛出一个异常信息,因此对于可预见的异常,我们应该捕捉并正确展示给用户或开发者。

js捕获异常处理_介绍JavaScript如何捕获常见异常【Throw、Try 和 Catch】

JavaScript和其他语言一样,都拥有捕获异常的机制。js中异常捕获的语句同样分为了三部分:try用于捕获异常,catch用于处理异常,finally用于关闭资源等后续操作。

图片懒加载及异常处理

在日常页面开发中,常常会涉及到图片的展示。有时候当图片资源过多时,我们希望能将图片延迟加载,同时当图片加载失败后,能用一张默认图片去代替其进行展示

Nodejs中request出现ESOCKETTIMEDOUT解决方案

使用Nodejs的request批量请求某一个接口,由于接口超时,出现 ESOCKETTIMEDOUT,程序中断,为了让程序遇到 ESOCKETTIMEDOUT 之后能够继续执行下去,需要对 request 部分加上 try...catch

关于JS面向对象的错误与异常处理方式

错误,指程序中的非正常运行状态,在其它编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象,其中包含错误的描迹信息。

如何优雅地给对象的所有方法添加异常处理

为了保证健壮性,我们要对所有可能报错的代码添加异常处理,但是每个方法都添加 try catch 又太麻烦,所以我们利用 Proxy 实现了代理,透明的给对象的所有方法都添加上了异常处理。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!