前言

async函数其实它就是 Generator 函数的语法糖,至于它跟Generator 有什么区别、优势在哪里、基本用法、语义等直接去看文档会更加容易理解。这篇文章主要讲的是,如果首页中发生多个请求我们怎么使用async函数处理


一、使用async函数实现多个请求

因为async函数在awat后面是可以返回Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)。所以我很喜欢定义一个对象去接受await返回的数据,如下:

async initData() {
    const cache = await this.cachePromise;
  }

思考:如果有多个请求呢?加入多个await返回promise实例吗?如果async函数内部出现异常会导致返回的 Promise 对象变为reject状态,后面的请求就会等待造成请求堵塞,所以有时,我们希望即使前一个异步操作失败,也不要中断后面的异步操作。这时可以将 await 放在 try...catch 结构里面,这样不管这个异步操作是否成功,后面 await 都会执行。

async initData() {
    const cache = await this.cachePromise;  // 出错了
    const cache2 = await this.cachePromise2;  //不执行
    const cache3 = await this.cachePromise3;  //不执行
    const cache4 = await this.cachePromise4;  //不执行
  }

// 修改后
 async initData() {
    try {
       const cache = await this.cachePromise;  // 出错了
       const cache2 = await this.cachePromise2;  //执行
       const cache3 = await this.cachePromise3;  //执行
       const cache4 = await this.cachePromise4;  //执行
     } catch(err) {
       console.log(err)
     }
  }

二、使用async函数实现多个请求并发

1.思考

由上面代码我们又得思考一个问题了,因为cachePromise、cachePromise2、cachePromise3、cachePromise4都是异步请求相互不依赖的,但是上面这样写就继发请求了要等上一个await请求结束才开始下一个请求,这样比较耗时。

2.解决方案

通过Promise.all实现并发请求,它们同时触发缩短程序的执行时间。

代码如下(示例):

注意:await必须放在async函数里面

// 写法一
    let [cache, cache2] = await Promise.all([this.cachePromise,  this.cachePromise2]);
    // 写法二
    let p= this.cachePromise();
    let p2= this.cachePromise2();
    let cache= await p;
    let cache2= await p2;

参考:ES6 async 函数_w3cschool


总结

有时候处理多请求并发可以不用async函数不用async就then回调,这主要是看个人习惯。我觉得使用async函数很方便能直接请求返回数据,对于一些表单提交又能做提示处理非常香。本人菜鸡一个请多指教