如何给所有的 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
posted @ 2023-01-05 20:27  南风晚来晚相识  阅读(406)  评论(0编辑  收藏  举报