一步一步看async&await中异常可以如何处理

已于 2022-01-25 22:18:58 修改
阅读量749 收藏
点赞数
分类专栏： 前端-随记 文章标签： javascript 前端 vue.js
于 2021-02-23 13:58:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/billycoder/article/details/113986040
版权

一步一步看async&await中异常可以如何处理

我们直接看代码

01-基本情况.js

没做任何错误处理的情况，没有try catch也没有.catch，不可取

代码

function  asyncFun(isOk) {
    return new Promise(function (resolve,reject) {
        setTimeout(() => {
            if(isOk){
              resolve('ok')
            }else{
              reject('error')
            }
          }, 3);
    })
  }
async function normalFun(isOk) {
    var res = await asyncFun(isOk)
    console.info(res)
}
   
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SodyNGaW-1614059905572)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223123512308.png)]

结论

这是不可取的

02-0-基本情况-try-catch.js

使用了try catch，这种用法也用的多

代码

function  asyncFun(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
  try {
    var res = await asyncFun(isOk)
    console.info(res)
  } catch (error) {
    console.info('出错了：'+error)
  }
}
 
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aFbBC7A5-1614059905574)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223123655303.png)]

结论

可以的

特殊情况

不过需要知道一点，try catch不是能捕获所有的异常奥

代码-06_try_catch不是可以捕获所有异常.js

async function run() {
  try {
      // 注意这里是return,不是await
      return Promise.reject('error');
  } catch (error) {
      // 代码不会执行到这里
  }
}
run()

/**
try catch不是可以捕获所有异常，不过，一般也不会去写这样的代码
 */

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8j9czqsL-1614059905575)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223123828214.png)]

02-1-基本情况-try-catch-多asynFun-多try.js

使用了try catch，如果包含多个await操作，那就分别需要多个try catch了

代码

function  asyncFun1(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
function  asyncFun2(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
function  asyncFun3(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
  try {
    var res = await asyncFun1(isOk)
    console.info(res)
  } catch (error) {
    console.info('出错了：'+error)
  }
  try {
    var res = await asyncFun2(isOk)
    console.info(res)
  } catch (error) {
    console.info('出错了：'+error)
  }
  try {
    var res = await asyncFun3(isOk)
    console.info(res)
  } catch (error) {
    console.info('出错了：'+error)
  }
}
 
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gm4qvW5q-1614059905576)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223124222904.png)]

结论

多个try catch，看着代码有点冗余而已，可以理解

03-基本情况-catch.js

可以的

代码

function  asyncFun(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
    var res = await asyncFun(isOk).catch(err=>{ console.info('出错了：'+err);err})
    if(res){
      console.info(res)
    }
}
 
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tFiW9j2E-1614059905577)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223124601287.png)]

结论

可以的

04-基本情况-catch-const.js

.catch操作配合了js的析构赋值

代码

function  asyncFun(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
    const [err, res] = await asyncFun(isOk).then(res => [null, res] ).catch(err => [err, null])
    if(res){
      console.info(res)
    }else{
      console.info('出错了：'+err)
    }
}
 
//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWZjKmIl-1614059905578)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223124633670.png)]

结论

也可以，不过await asyncFun(isOk).then(res => [null, res] ).catch(err => [err, null])，每个异步函数都要这么去调用的话就有点冗余

05-基本情况-catch-const-封装.js

.catch操作配合了js的析构赋值，而且还做了一个封装，调用方便了很多

代码

function to(callback) {
  return callback.then(data => [null, data] ).catch(err => [err, null])
}

function  asyncFun(isOk) {
  return new Promise(function (resolve,reject) {
    setTimeout(() => {
      if(isOk){
        resolve('ok')
      }else{
        reject('error')
      }
    }, 3);
  })
}
async function normalFun(isOk) {
    const [err, res] = await to(asyncFun(isOk))
    if(res){
      console.info(res)
    }else{
      console.info('出错了：'+err)
    }
}

//正确
normalFun(true)

//错误
normalFun(false)

执行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EIkx0DJM-1614059905579)(一步一步看asynca&wait中异常可以如何处理.assets/image-20210223124740725.png)]

结论

可以的，这个也是参考国外的一个博客https://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/，网上也很多人说这种写法

billycoder
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
async await 异常处理示例代码
09-21
为文章 Async Await 异常处理 所写，主要展示四种典型情况下的异常处理。 async await; task.wait(); async 不 await; async void
c# 第五课 async await
dicheng6608的博客
04-19 195
Async 方法有三种可能的返回类型： Task、Task<T> 和 void，但是 async 方法的固有返回类型只有 Task 和 Task<T>。 当从同步转换为异步代码时，任何返回类型 T 的方法都会成为返回 Task<T> 的 async 方法，任何返回 void 的方法都会成为返回 Task 的 async 方法。...
【JS】async/await异常捕获，这样做才完美
最新发布
JavaDog程序狗
05-27 1008
文章关注JavaScript中async/await的异常处理，指出未捕获异常的潜在风险。作者提出三种解决方案：1）使用try-catch，虽全面但冗余；2）借助Promise的catch，减少冗余但需检查返回值；3）利用await-to-js库简化异常处理，提升代码整洁度。文章提倡采用这些方法提升代码质量。
async/await以及错误处理
soputasmile的笔记
02-16 8054
1. async 1.1 async可以修饰函数表达式、函数声明、箭头函数和方法 let func = async function(){} //函数表达式 async function foo(){} //函数声明 async () => {} //箭头函数 class Person{ async methodA(){} //方法 } 1.2 async里面的代码还是同步执行的 async function foo(){ console.log(2) return 3 } foo
async_await异常捕获
前端开发工程师博客
06-20 1625
不知道大家项目里面是怎么处理 async/await 的异常，我斗胆在我们项目里翻了一下，发现大量使用 try-catch 来处理 async/await 异常。首先说明一下， try-catch 处理并没有什么问题，我只是觉得这么写代码会有点乱，感觉代码逻辑像是断层了一样，不易理解；其次是代码冗余问题，单个 try-catch 就占了好几行代码，如果每个请求的地方都添加 try-catch，就会显得代码很臃肿。而对于这种大量相同的冗余代码，完全可以用一种通用的函数来替代。
Async的错误处理
weixin_37562062的博客
04-07 1467
Async/await作为generator+自动执行器+promise的语法糖，他能够用同步写法写异步代码，同时他捕获错误的方式也十分简单：promise.catch和try-catch。 promise.catch async function foo() { let res = await 1; throw new Error('my error'); } foo().catch(e => { console.log('catch捕获', e); }); 由于asyn
小程序如何支持使用 async/await详解
10-16
在JavaScript的世界里，`async/await`是一种处理异步操作的强大工具，它使得代码看起来更加同步，提高了可读性和可维护性。然而，微信小程序原生并不支持`async/await`语法，因为它是基于JavaScript的轻量级运行环境...
async/await地狱该如何避免详解
08-27
4. **使用try-catch处理错误**：`async/await`允许使用`try-catch`块来捕获和处理异常，使得错误处理更加直观。例如： ```javascript async function someAsyncTask() { try { const result = await ...
oop-promises-async-await：这是我针对OOP，Promises，AsyncAwait GA课程的仓库
02-12
6. **多态**：多态是指同一种行为在不同对象上有不同的表现形式，JavaScript中可以通过方法覆盖或重写实现。 **Promise** Promise是JavaScript中处理异步操作的一种机制，它代表了一个可能尚未完成的异步操作的...
async-js:在JavaScript中使用异步
03-28
9. **Async/Await 和 Generator 的对比**：虽然两者都可以处理异步操作，但async/await提供了更直观的语法，减少了回调和手动管理Promise的复杂性。然而，Generator在某些场景下（如自定义迭代器）仍具有优势。 10....
VB 采用AsyncRead下载文件
12-08
在VB（Visual Basic）编程中，AsyncRead是一个用于异步读取文件或数据流的方法，这对于处理大文件或需要在不阻塞用户界面的情况下执行I/O操作非常有用。在本场景中，`VB 采用AsyncRead下载文件`指的是利用VB的异步...
[译] 在 async/await 中更好的处理错误
matong5418的博客
02-25 255
本篇文章介绍在使用 async/await 语法时，一种更好的处理错误的方式。在此之前，大家也需要先了解下 Promise 的工作原理。 从回调地狱到 Promise 回调地狱（callback Hell），也称为“末日金字塔（Pyramid of Doom）”，是在开发者代码中看到的一种反模式（anti-pattern），这种异步编程方式并不明智。- Colin Toh 由于回调函数的嵌套，...
js如何处理async await 的错误，多个的时候呢
weixin_41277748的博客
04-25 1719
我们在开发过程中，一般都是用try catch 来捕捉错误，但是如果是下面这种情况，就只能捕捉第一个错误，后面的错误都捕捉不到，除非第一个没有错。但是得考虑一个问题，这个参数有可能也有参数，这个怎么办，所以必须在外忙调用，返回的数据，就可以用数组的解构，就可以拿到了，然后就是处理处理了。虽然这样可以，但是代码看上去就不是一个牛逼人写的，当然也会有人说，一般都不写，一般都是拿到res1的结果传递给req2()好，接下来我们就来试试，如何使用，怎么下载这个，我这里就不多介绍，都是大佬，看文档就可以了。
async await 的错误处理方法
光
09-01 7313
1. try/catch es6 的初学者必须知道的捕获错误的方法，因为它是相对来说最保险的，既可以捕获同步错误也可以捕获异步错误。 捕获异步错误： run(); async function run() { try { await Promise.reject(new Error('Oops!')); } catch (error) { error.message; // "Oops!" } } 捕获同步错误： run(); async function run() {
js：Promise理解、async和await的理解、宏任务/微任务、异常处理、防抖和节流
Litt_White的博客
08-14 4101
Promise理解、async和await的理解（未完成）、构造函数/原型/原型链、防抖和节流、this指向（普通函数，箭头函数，JS/Vue的this）、上下文环境、作用域和闭包
Nodejs await异常处理
Nodejs
05-17 3269
老生常谈，很多人在面对轻松使用await的同时，又因为它的处理机制而又头疼。 现在博主带来两种异常处理方式： 1: 传统的try{}catch{} //但当代码量复杂的时候就显得不够整洁 2: 推荐使用scopsy贡献的 await-to-js包，可以使用npm直接下载 它的底层很简单，就是对promise进行了一层封装，我们可以把它拿出来放在项目中的基类中进行使用： //该npm包的源码，利用...
js中处理 await 异步异常以及try、catch、finally、throw 的基本使用
人与人之间最小的差别是智商，最大的差别是坚持。
08-13 9938
我们在项目中经常遇到报错程序终止执行，无法看到后续代码渲染的内容，尤其是编写异步代码时无法捕捉错误，更是头疼。 下面是一个简单的错误处理的小例子。帮助大家提供一个简单思路。 async getListData(version2Ids) { let version1Id = getStore({ name: "versionId" }); let projectId = ...
kotlin协程async await的异常踩坑以及异常处理的正确姿势
喻志强的博客
10-30 5751
使用Kotlin来做一些异步操作相信大家都非常熟悉了，特别是结合Jetpack的一些组件，使得我们在Android开发中写异步任务非常的方便。 但是，关于在使用协程的时候，个人觉得异常处理这一块是相对来讲是需要花时间去了解的地方，因为在使用过程中还是会遇到一些小坑的，这里记录下之前遇到的坑。 踩一个使用async await时异常处理的坑 kotlin 协程的异常处理官方文档 我们先来看官方的示例： 可以看到，示例代码中在对 async 开启的协程进行异常捕获是在调用 await 时。看打印结果也确实是捕
await如何优雅的捕获异常？
发果叁
12-31 3666
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
微信小程序捕获async/await函数异常实践
qq_38472574的博客
08-03 104
微信小程序捕获async/await函数异常实践
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值