如何优雅处理async抛出的错误

很久之前写过一个 Callback、Promise、Generator、async/await 对比

里面其实有略微的提到了 async 的错误处理。今天单独在做一次笔记

普通的捕获错误的方式

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('fetch data is me')
    }, 1000)
  })
}
;(async () => {
  try {
    const data = await fetchData()
    console.log('data is ->', data)
  } catch (err) {
    console.log('err is ->', err)
  }
})()

如果是这样呢？有多个异步操作，需要对每个异步返回的 error 错误状态进行不同的处理

第一次优化

既然 await 后面需要接一个 promise 方法。Prmomise 方法有 then 和 catch 啊
利用这 2 个链式调用，返回不同的值，不就可以了嘛

const [err, data] = await fetchData()
  .then(data => [null, data])
  .catch(err => [err, null])

感觉好多了，这下我们只需要判断每一个 err，就可以分别处理抛出的错误

bug 不能每个 await 都写这么长，写着也不方便也不优雅，再优化一下。

第二次优化

抽离成公共方法

const awaitWrap = promise => {
  return promise.then(data => [null, data]).catch(err => [err, null])
}

使用的时候：

// 记得引入 awaitWrap 方法
const [err, data] = await awaitWrap(fetchData())
console.log('err', err)
console.log('data', data)
// err null
// data fetch data is me

这样就大功告成了~