如何给所有的 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

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

相关文章
|
9月前
|
前端开发 JavaScript
Promise、async和await
Promise、async和await
90 0
|
9月前
|
前端开发 JavaScript
什么是 async、await ?
什么是 async、await ?
|
9月前
|
前端开发 UED
【面试题】async/await 函数到底要不要加 try catch ?
【面试题】async/await 函数到底要不要加 try catch ?
115 0
|
JSON 前端开发 JavaScript
async/await的应用
async/await的应用
71 0
|
前端开发 JavaScript
|
3月前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
51 1
|
9月前
|
前端开发 JavaScript 开发者
阿珊带你深入理解 async/await 函数
阿珊带你深入理解 async/await 函数
|
9月前
|
前端开发 JavaScript
async/await
async/await
48 0
|
9月前
|
JSON 前端开发 JavaScript
什么是async和await?
什么是async和await?
78 0
|
9月前
|
前端开发 UED
【面试题】 async/await 函数到底要不要加 try catch ?
【面试题】 async/await 函数到底要不要加 try catch ?
【面试题】 async/await 函数到底要不要加 try catch ?