async函数实现多个请求处理

前言

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函数很方便能直接请求返回数据，对于一些表单提交又能做提示处理非常香。本人菜鸡一个请多指教