如何优雅处理 async await 错误

Oct 19, 2022
#axios #js

借用 await-to-js 库 https://github.com/scopsy/await-to-jshttps://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/

  • 之前处理异步请求时是这样的：
async asyncTask() {
    try {
      const asyncFuncARes = await asyncFuncA()
    } catch(error) {
      return new Error(error)
    }
    try {
      const asyncFuncBRes = await asyncFuncB(asyncFuncARes)
    } catch(error) {
      return new Error(error)
    }
    try {
      const asyncFuncCRes = await asyncFuncC(asyncFuncBRes)
    } catch(error) {
      return new Error(error)
    }
}
  • 使用 await-to-js 后是这样的:
import to from './to.js';
function async asyncTask() {
    const [err, asyncFuncARes]  = await to(asyncFuncA())
    if(err) throw new (error);
    const [err, asyncFuncBRes]  = await tp(asyncFuncB(asyncFuncARes))
    if(err) throw new (error);
    const [err, asyncFuncCRes]  = await to(asyncFuncC(asyncFuncBRes)
    if(err) throw new (error);
}
await-to-js 源码分析
export function to(promise, errorExt) {
    return promise
        .then((data) => [null, data])
        .catch((err) => {
        if (errorExt) {
            const parsedError = Object.assign({}, err, errorExt);
            return [parsedError, undefined];
        }
        return [err, undefined];
    });
}
export default to;

这里我们先抛开errorExt这个自定义的错误文本,核心代码是这样的

export function to(promise) {
    return promise
        .then((data) => [null, data]) // 成功,返回[null,响应结果]
        .catch((err) => {
            return [err, undefined]; // 失败,返回[错误信息,undefined]
    });
}
export default to;

代码逻辑结论

  • 无论成功还是失败都返回一个数组,数组的第一项是和错误相关的,数组的第二项是和响应结果相关的
  • 成功的话数组第一项也就是错误信息为空,数组第二项也就是响应结果正常返回
  • 失败的话数组第一项也就是错误信息为错误信息,数组第二项也就是响应结果返回undefined
Back