ES7之Async/await的使用详解

在 js 异步请求数据时，通常，我们多采用回调函数的方式解决，但是，如果有多个回调函数嵌套时，代码显得很不优雅，维护成本也相应较高。 ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖可以更好解决多层回调问题。

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。
await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。

一个ajax请求时

通常 使用 ajax 请求数据时，会

$.ajax({ url: 'data1.json', type: 'GET', success: function (res) {  console.log(res) // 请求成功，则得到结果res }, error: function(err) {  console.log(err) }})

上面可以得到我们想要的结果 res ---> { "url": "data2.json" }

多个ajax请求时

但是 当得到的数据 res 需要用于另一个 ajax 请求时，则需要如下写法：

$.ajax({ url: 'data1.json', type: 'GET', success: function (res) {  $.ajax({   url: res.url, // 将 第一个ajax请求成功得到的res 用于第二个ajax请求   type: 'GET',   success: function (res) {    $.ajax({     url: res.url, // 将第二个ajax请求成功得到的res 用于第三个ajax请求     type: 'GET',     success: function (res) {      console.log(res) // {url: "this is data3.json"}     },     error: function(err) {      console.log(err)     }    })   },   error: function(err) {    console.log(err)   }  }) }, error: function(err) {  console.log(err) }})

上面出现多个回调函数的嵌套，可读性较差（虽然这种嵌套在平常的开发中少见，但是在node服务端开发时，还是很常见的）

优化方法

使用 promise 链式操作

如下，使用 Promise，进行链式操作，可以使上面的异步代码看起来如同步般易读，从回调地狱中解脱出来。。

function ajaxGet (url) { return new Promise(function (resolve, reject) {  $.ajax({   url: url,   type: 'GET',   success: function (res) {    resolve(res);   },   error: function(err) {    reject('请求失败');   }  }) })};ajaxGet('data1.json').then((d) => { console.log(d);  // {url: "data2.json"} return ajaxGet(d.url);}).then((d) => { console.log(d);  // {url: "data3.json"} return ajaxGet(d.url);}).then((d) => { console.log(d);  // {url: "this is data3.json"}})

Async/await 方法