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