如何优雅的不用try-catch捕获await的错误
在日常开发中，通常我们会用 promise 的形式来进行一些异步的操作，但是为了更方便，我们也会较多的使用语法糖 async await 的形式，但是这两者有个区别，promise 可以使用 .catch 来捕获问题，但是 async await 却只能使用 try catch 来捕获，这样写起来很不友好，代码中充斥着大量的 try catch，类似这种
(async () => {
try {
const list = await getList()
const info = await getInfo()
} catch(err) {
console.log('err is ->', err)
}
})()
如果要对每个接口进行 try catch 捕获，代码层面无疑是臃肿的，那有没有什么较好的方式呢？
既然刚才提到了 await 是 promise 的语法糖，那我们用 promise 方式来捕获就可以了吧，于是有了下面的代码
(async () => {
const data = await getList().catch((err) => {
// 处理 err 的逻辑
console.log("err", err)
})
})()
这样有错误的话就处理，没有错误的话就返回了对应的数据，但是每个方法要搞这么一手，也挺麻烦的，而且最重要的错误信息没有同步的返回，需要在每个代码逻辑里面都进行处理
针对上面的问题，我们再优化一下，把错误信息也同步的返回，这里使用数组的形式去接受数据，一个是异步错误信息，一个是成功后返回的数据
(async () => {
const [err, data] = await getList().then(data => [null, data]).catch(err => [err, undefined])
})()
这样我们就可以通过 err 以及 data 变量获取到我们想要的信息，那如何将这个方法进一步的封装呢？
其实有一个 await-to-js 的库，是专门做这个操作的，我看了一下源码，非常简单，就拿过来直接看吧，思想都是一样的，源码很短，只有 23 行，其中还包括注释和空行，主要的思想跟之前我们的思路都是一样的
/**
* @param { Promise } promise
* @param { Object= } errorExt - Additional Information you can pass to the err object
* @return { Promise }
*/
export function to<T, U = Error> (
promise: Promise<T>,
errorExt?: object
): Promise<[U, undefined] | [null, T]> {
return promise
.then<[null, T]>((data: T) => [null, data])
.catch<[U, undefined]>((err: U) => {
if (errorExt) {
const parsedError = Object.assign({}, err, errorExt);
return [parsedError, undefined];
}
return [err, undefined];
});
}
export default to;
主要流程如下，这个函数接收一个 promise 和 errorExt 的参数，如果 promise 成功返回 [null, data]，如果有异常，则看是否有添加的异常信息，如果有则进行 err 的合并返回 [err, undefined]
使用的话也非常简单，只需要对自身的 promise 函数进行包裹，类似这样
(async () => {
// 成功
const promise = Promise.resolve(data);
const [err, data] = await to(promise);
// 错误，并追加错误信息
const promise = Promise.reject({ error: 'Error message' });
const [err] = await to(promise, {
extraKey: 1
})
// { error: 'Error message'; extraKey: 1 }
})()
本质就是一个函数装饰器，将我们传入的函数功能扩展而不改变原来的函数