async/await 的错误捕获
一、案发现场
为了更好的说明，举一个很常见的例子：
function getData(data) {
return new Promise((resolve, reject) => {
if (data === 1) {
setTimeout(() => {
resolve('getdata success')
}, 1000)
} else {
setTimeout(() => {
reject('getdata error')
}, 1000)
}
})
}
window.onload = async () => {
let res = await getData(1)
console.log(res) //getdata success
}
这样写可以正常打印getdata success 但是如果我们给getData传入的参数不是1，getData会返回一个reject的Promise，而这个地方我们并没有对这个错误进行捕获，则会在控制台看见这样一个鲜红的报错Uncaught (in promise) getdata error
二、尝试捕获它
1. 踹一脚
捕捉错误，首先想到的就是“踹一脚”：
window.onload = async () => {
try {
let res = await getData(3)
console.log(res)
} catch (error) {
console.log(res) //getdata error
}
}
看似问题已经被解决，但是如果我们有一堆请求，每一个await都需要对应一个trycatch，那就多了很多垃圾代码。或许我们可以用一个trycatch将所有的await包起来，但是这样就很不方便对每一个错误进行对应的处理，还得想办法区分每一个错误。
2. then()
因为返回的是一个Promise，那我们首先想到的就是.then()和.catch()，于是很快就能写出以下代码：
window.onload = async () => {
let res = await getData(3).then(r=>r).catch(err=>err);
console.log(res) //getdata error
}
这样看起来比“踹一脚”高大上一点了……
三、有没有更好的方式
上面那种方法是有一定问题的，如果getData()返回是resolve，res则是我们想要的结果，但是如果getData()返回是reject，res则是err，这样错误和正确的结果混在一起了，显然是不行的。
window.onload = async () => {
let res = await getData(3)
.then((res) => [null, res])
.catch((err) => [err, null])
console.log(res) // ["getdata error",null]
}
这种方式有的类似error first的风格。这样可以将错误和正确返回值进行区分了。但是这种方式会让每一次使用await都需要写很长一段冗余的代码，因此考虑提出来封装成一个工具函数：
function awaitWraper(promise) {
return promise.then((res) => [null, res])
.catch((err) => [err, null])
}
window.onload = async () => {
let res = await awaitWraper(getData(3))
console.log(res) // ["getdata error",null]
}
好多了，就先这样吧。
原文链接：https://zhuanlan.zhihu.com/p/114487312
