前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >async/await 的错误捕获

async/await 的错误捕获

作者头像
从入门到进错门
发布2020-03-19 17:50:32
1.3K0
发布2020-03-19 17:50:32
举报
文章被收录于专栏:前端菜鸟变老鸟

一、案发现场

为了更好的说明,举一个很常见的例子:

代码语言:javascript
复制
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. 踹一脚

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

代码语言:javascript
复制
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(),于是很快就能写出以下代码:

代码语言:javascript
复制
window.onload = async () => {
  let res = await getData(3).then(r=>r).catch(err=>err);
  console.log(res) //getdata error
}

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

三、有没有更好的方式

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

代码语言:javascript
复制
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都需要写很长一段冗余的代码,因此考虑提出来封装成一个工具函数:

代码语言:javascript
复制
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 删除

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

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、案发现场
  • 二、尝试捕获它
    • 1. 踹一脚
      • 2. then()
      • 三、有没有更好的方式
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档