如何优雅的不用try-catch捕获await的错误

2023-09-05 18:26:40 浏览数 (1)

在日常开发中,通常我们会用 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 }
})()

本质就是一个函数装饰器,将我们传入的函数功能扩展而不改变原来的函数

0 人点赞