async await

2018/6/13 react

#async await async,await是一起出现的,await关键字的作用是,等待该语句执行完才能执行下一步,否则报错。 async和await关键字是基于promise和generator做了简单的封装。本质上它允许我们在所需要的任意位置使用await关键字来暂停一个函数。另一个好处就是可以使用promise不能使用的try和catch

async的优点:

  1. 内置执行器 自带执行器。
  2. 更好的语义 语义更清楚,async表示函数里面有异步操作,await表示紧跟在后面的表达式需要等待结果。
  3. 更好的适用性 async函数的await命令后面,可以跟promise对象和原始类型的值(数值,字符串和布尔值,但这同时通榆同步操作)

# async函数的实现

image.png

所有的async函数都可以写成上面的第二种形式,其中spawn函数就是自动执行器。

需要注意的地方:

  1. async和await是基于promise的,所以使用async的函数将会始终返回一个promise对象。

  2. 在使用await的时候我们暂停了函数,而非整段代码。

  3. async和await是非组塞的。

  4. 仍然可以使用promise。

  5. await只能用于生命为async的函数

  6. 因为我们不能全部范围内的使用await

  7. await命令后面的promise对象,运行结果可能是rejected,所以最好把await命令放在try...catch代码块中

    image.png

# async、await串行并行处理

串行:等待前面一个await执行后在执行下一个,以此类推

image.png

可以看到输出是

image.png

很耗时,如果不用串行,用并行的话

并行:将多个promise直接发起请求(先执行async所在的函数),然后再进行await操作

image.png

输出结果如下

image.png

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

# async、await错误处理

因为async返回的是promise对象,所以我们就要考录异步请求发生错误的时候我们就要出来reject的状态了。

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

image.png

出来的结果是

image.png