async/await 的错误捕获

从入门到进错门

发布于 2020-03-19 17:50:32

1.2K0

发布于 2020-03-19 17:50:32

一、案发现场

为了更好的说明，举一个很常见的例子：

function getData(data) {
  return new Promise((resolve, reject) => {
    if (data === 1) {
      setTimeout(() => {
        resolve('getdata success')
      }, 1000)
    } else {
      setTimeout(() => {
        reject('getdata error')
      }, 1000)
    }
  })
}
window.onload = async () => {
  let res = await getData(1)
  console.log(res) //getdata success
}

这样写可以正常打印getdata success 但是如果我们给getData传入的参数不是1，getData会返回一个reject的Promise，而这个地方我们并没有对这个错误进行捕获，则会在控制台看见这样一个鲜红的报错Uncaught (in promise) getdata error

二、尝试捕获它

1. 踹一脚

捕捉错误，首先想到的就是“踹一脚”：

window.onload = async () => {
  try {
    let res = await getData(3)
    console.log(res)
  } catch (error) {
    console.log(res) //getdata error
  }
}

看似问题已经被解决，但是如果我们有一堆请求，每一个await都需要对应一个trycatch，那就多了很多垃圾代码。或许我们可以用一个trycatch将所有的await包起来，但是这样就很不方便对每一个错误进行对应的处理，还得想办法区分每一个错误。

2. then()

因为返回的是一个Promise，那我们首先想到的就是.then()和.catch()，于是很快就能写出以下代码：

window.onload = async () => {
  let res = await getData(3).then(r=>r).catch(err=>err);
  console.log(res) //getdata error
}

这样看起来比“踹一脚”高大上一点了……

三、有没有更好的方式

上面那种方法是有一定问题的，如果getData()返回是resolve，res则是我们想要的结果，但是如果getData()返回是reject，res则是err，这样错误和正确的结果混在一起了，显然是不行的。

window.onload = async () => {
  let res = await getData(3)
  .then((res) => [null, res])
  .catch((err) => [err, null])
  console.log(res) // ["getdata error",null]
}

这种方式有的类似error first的风格。这样可以将错误和正确返回值进行区分了。但是这种方式会让每一次使用await都需要写很长一段冗余的代码，因此考虑提出来封装成一个工具函数：

function awaitWraper(promise) {
  return promise.then((res) => [null, res])
  .catch((err) => [err, null])
}
window.onload = async () => {
  let res = await awaitWraper(getData(3))
  console.log(res) // ["getdata error",null]
}

好多了，就先这样吧。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

node.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

node.js

登录后参与评论

0 条评论

热度