如何给所有的 await async 函数添加try/catch?

简介: 如何给所有的 await async 函数添加try/catch?

如何给所有的 await async 函数添加try/catch?做全局捕获异常。

面试官:如何给所有的 await async 函数添加try/catch?做全局捕获异常。
我们可以使用 window.addEventListener('unhandledrejection', function (event) {})
读音:  unhandled  【an han dou】    rejection   【rɪ 'dʒe k ʃ(ə)n】
event有个reason属性,里面有error的message和堆栈信息…
要event.preventDefault()阻止冒泡才行
mdn 对于 unhandledrejection 的解释
当 Promise 被 reject 且没有 reject 处理器的时候,会触发 unhandledrejection 事件;
这可能发生在 window 下,但也可能发生在 Worker 中。
这对于调试和为意外情况提供后备错误处理非常有用。

我们来看一下下面这一段代码

async function fn() {
  let value = await new Promise((resolve, reject) => {
    reject('我报错啦');
  }) 
  console.log('do something...');
}
fn()

出现的现象

好家伙直接在控制台报错了。后面又没有捕获异常。
那怎么去解决这个问题呢?
可以使用catch捕获异常

使用catch处理异常

async function fn() {
    let value = await new Promise((resolve, reject) => {
        reject('我报错啦');
    }).catch(err=>{
        console.log('捕获到了异常:',err)
    })
    console.log('do something...');
}
fn()

喊上层自己处理(手动狗头)

async function fn() {
    let value = await new Promise((resolve, reject) => {
        reject('我报错啦');
    })
    console.log('do something...');
}
fn().then(res=>{
    console.log('res',res)
}).catch(err=>{
    console.log('上层使用者捕获:',err)
})

捕获 window.addEventListener 捕获异常

window.addEventListener("unhandledrejection", function (event) {
    console.log('全局捕获', event )
    event.preventDefault()
})
async function fn() {
    let value = await new Promise((resolve, reject) => {
        reject('failure');
    })
    console.log('do something...');
}
fn()

用最简单的语言总结一下

unhandledrejection 事件监听 reject异常。
或者说 unhandledrejection 最全局异常捕获
再者说 unhandledrejection给所有的 await async 函数添加try/catch

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
7月前
|
前端开发 JavaScript
什么是 async、await ?
什么是 async、await ?
|
7月前
|
前端开发 UED
【面试题】async/await 函数到底要不要加 try catch ?
【面试题】async/await 函数到底要不要加 try catch ?
102 0
|
JSON 前端开发 JavaScript
async/await的应用
async/await的应用
66 0
|
前端开发 JavaScript
|
7月前
|
前端开发 JavaScript 开发者
阿珊带你深入理解 async/await 函数
阿珊带你深入理解 async/await 函数
|
7月前
|
前端开发 JavaScript
async/await
async/await
41 0
|
7月前
|
JSON 前端开发 JavaScript
什么是async和await?
什么是async和await?
64 0
|
7月前
|
前端开发 UED
【面试题】 async/await 函数到底要不要加 try catch ?
【面试题】 async/await 函数到底要不要加 try catch ?
【面试题】 async/await 函数到底要不要加 try catch ?
|
7月前
|
前端开发 JavaScript
|
前端开发 API
Async/Await 在何时该使用,何时不使用
使用 async/await 是在处理异步操作时的一种更简洁、易读的方式,它基于 Promise,并且可以使异步代码看起来像同步代码一样编写。然而,并不是所有情况下都需要使用 async/await。
219 0

热门文章

最新文章