备注： async/await 的内容还有待完善。

async/await （异步函数）概述

async/await 是在 ES7 中引入的新语法，可以更加方便地进行异步操作。

本质： Generator 的语法糖。

  • async 的返回值是 Promise 实例对象。
  • await 可以得到异步结果。

我们在普通的函数前面加上 async 关键字，就成了 async 函数。
语法：

  1.     async function foo() {
  2.         await 异步操作;
  3.         await 异步操作；
  4.     }

我们在普通的函数前面加上 async 关键字，就成了 async 函数。

async/await 的基本用法

async 后面可以跟一个 Promise 实例对象。代码举例如下：

  1.     const request1 = function() {
  2.         const promise = new Promise(resolve => {
  3.             request('https://www.baidu.com', function(response) {
  4.                 if (response.retCode == 200) {
  5.                     // 这里的 response 是接口1的返回结果
  6.                     resolve('request1 success'+ response);
  7.                 } else {
  8.                     reject('接口请求失败');
  9.                 }
  10.             });
  11.         });
  13.         return promise;
  14.     };
  16.     async function queryData() {
  17.         const response = await request1();
  18.         });
  19.         return response;
  20.     }
  21.     queryData().then(data => {
  22.         console.log(data);
  23.     });

基于 async/await 处理多次 Ajax 请求【重要】

实际开发中，现在有三个网络请求，请求2必须依赖请求1的结果，请求3必须依赖请求2的结果，如果按照往常的写法，会有三层回调，会陷入“回调地狱”。

这种场景其实就是接口的多层嵌套调用。之前学过 Promise，它可以把原本的多层嵌套调用改进为链式调用。

而今天要学习的 async/await ，可以把原本的“多层嵌套调用”改成类似于同步的写法，非常优雅。

代码举例：

暂略。

async、Promise、Generator的对比（async的特点）

1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行。
2、async返回的总是Promise对象，可以用then方法进行下一步操作。
3、async取代Generator函数的星号*，await取代Generator的yield。
4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用。

参考链接