async/await理解

小灰灰 2023-08-17 15:23 78阅读 0赞

今天在看代码是发现这这两个函数  一直没遇到过百度看了下  发现一篇很详细的文章

[原文出处][Link 1]

在最新的ES7（ES2017）中提出的前端异步特性：async、await。

## 什么是async、await？ ##

async顾名思义是“异步”的意思，async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思，就是用于等待异步完成。并且await只能在async函数中使用

通常async、await都是跟随Promise一起使用的。为什么这么说呢？因为async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么)；

await得到Promise对象之后就等待Promise接下来的resolve或者reject。

来看一段简单的代码：

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

1 async function testSync() {
    2      const response = await new Promise(resolve => {
    3          setTimeout(() => {
    4              resolve("async await test...");
    5           }, 1000);
    6      });
    7      console.log(response);
    8 }
    9 testSync();//async await test...

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

就这样一个简单的async、await异步就完成了。使用async、await完成异步操作代码可读与写法上更像是同步的，也更容易让人理解。

##  async、await串行并行处理 ##

### 串行：等待前面一个await执行后接着执行下一个await，以此类推 ###

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

1 async function asyncAwaitFn(str) {
     2     return await new Promise((resolve, reject) => {
     3         setTimeout(() => {
     4             resolve(str)
     5         }, 1000);
     6     })
     7 }
     8 
     9 const serialFn = async () => { //串行执行
    10 
    11     console.time('serialFn')
    12     console.log(await asyncAwaitFn('string 1'));
    13     console.log(await asyncAwaitFn('string 2'));
    14     console.timeEnd('serialFn')
    15 }
    16 
    17 serialFn();

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

![format_png][]

可以看到两个await串行执行的总耗时为两千多毫秒。

### 并行：将多个promise直接发起请求（先执行async所在函数），然后再进行await操作。 ###

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

1 async function asyncAwaitFn(str) {
     2     return await new Promise((resolve, reject) => {
     3         setTimeout(() => {
     4             resolve(str)
     5         }, 1000);
     6     })
     7 }
     8 const parallel = async () => { //并行执行
     9     console.time('parallel')
    10     const parallelOne = asyncAwaitFn('string 1');
    11     const parallelTwo = asyncAwaitFn('string 2')
    12 
    13     //直接打印
    14     console.log(await parallelOne)
    15     console.log(await parallelTwo)
    16 
    17     console.timeEnd('parallel')
    18 
    19 
    20 }
    21 parallel()

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

![format_png 1][]

通过打印我们可以看到相对于串行执行，效率提升了一倍。在并行请求中先执行async的异步操作再await它的结果，把多个串行请求改为并行可以将代码执行得更快，效率更高。

## async、await错误处理 ##

JavaScript异步请求肯定会有请求失败的情况，上面也说到了async返回的是一个Promise对象。既然是返回一个Promise对象的话那处理当异步请求发生错误的时候我们就要处理reject的状态了。

在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

async function catchErr() {
          try {
              const errRes = await new Promise((resolve, reject) => {
                     setTimeout(() => {
                        reject("http error...");
                      }, 1000);
                 );
                      //平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功
                     // console.log(errRes.status, errRes.statusText);
             } catch(err) {
                  console.log(err);
             }
     }
     catchErr(); //http error...

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

以上就是async、await使用try catch 处理错误的方式。

[Link 1]: https://www.cnblogs.com/leungUwah/p/7932912.html
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230810/1654e545f571457da6b9dbcc43a4eed5.png
[format_png]: /images/20230810/0dd68c9f87604e36a45c55a04bfc3172.png
[format_png 1]: /images/20230810/3ea075618f944b5897f45edfafe2981d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，78人围观）

还没有评论，来说两句吧...

相关阅读

相关理解 | 理解a: float=10

最近看别人写的代码，经常看到这样的写法： b: float = 0 平时写python代码，基本上没有这么写过，我的经常写法是： b = 10 那我就感

男娘i/ 2022年12月31日 15:25/ 0 赞/ 225 阅读

相关 AOP理解

一、什么是AOP？我们先回顾一下OOP：Object Oriented Programming，OOP作为面向对象编程的模式，获得了巨大的成功，OOP的主要功能是数据封

以你之姓@/ 2022年11月13日 05:20/ 0 赞/ 183 阅读

相关深度理解笔记_对深度理解的理解

是什么？当前深度理解的东西是什么？可不可以不依赖任何资料将其用自己的话进行转述？并且可以让没有学习过这个概念的人一下子就弄明白为什么？为什么要发明创造这

╰半橙微兮°/ 2022年11月10日 01:24/ 0 赞/ 215 阅读

相关 java 异常理解_Java异常理解

1.1 什么是异常：异常就是Java程序在运行过程中出现的错误。 1.2 异常继承体系图: ![c82c18d55c227d5ba240adb3e55db0f7.png

曾经终败给现在/ 2022年10月23日 08:15/ 0 赞/ 281 阅读

相关理解矩阵

作者连接：http://my.csdn.net/myan 前不久chensh出于不可告人的目的，要充当老师，教别人线性代数。于是我被揪住就线性代数中一些务虚性的问题与他讨论了

太过爱你忘了你带给我的痛/ 2022年08月07日 14:55/ 0 赞/ 226 阅读

相关 MapReduce理解-深入理解MapReduce

　前面的几篇博客主要介绍了[Hadoop][]的存储[HDFS][]，接下来几篇博客主要介绍Hadoop的计算框架MapReduce。本片博客主要讲解MapReduce框架的具

心已赠人/ 2022年07月12日 06:59/ 0 赞/ 399 阅读

相关 @SpringBootApplication理解

`@SpringBootApplication`是Spring Boot 的核心注解，它是一个组合注解，源码如下： @Target(ElementType.TYPE)

妖狐艹你老母/ 2022年06月16日 00:25/ 0 赞/ 272 阅读

相关理解指针

变量的本质：任何变量存储的，都是数。这个数可以是整数或者小数。而内存地址就是一个整数。我们只不过是把存储内存地址的变量，称为指针罢了。 include<stdi

拼搏现实的明天。/ 2022年06月13日 06:29/ 0 赞/ 232 阅读

相关 socket理解

1. 什么是TCP/IP、UDP？　　TCP/IP（Transmission Control Protocol/Internet Protocol）即传输控制协议/网间协议

水深无声/ 2022年06月08日 08:09/ 0 赞/ 189 阅读

相关 vuex理解

什么是vuex > Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式什么是状态管理 > 先了解下单向数据流帮助我们更好地理解状态管理。平时我们写的简单

短命女/ 2021年09月19日 20:06/ 0 赞/ 417 阅读