Async 函数处理异步请求

在 promise 中我们处理相互依赖的异步数据使用链式调用的方式，虽然相比回调函数已经优化很多，但书写及理解上还是没有同步代码直观。我们看下 async 函数如何解决这个问题。

先回顾下需求及 promise 的解决方案：

需求：请求 URL1 得到 data1；请求 URL2 得到 data2，但 URL2 = data1[0].url2；请求 URL3 得到 data3，但 URL3 = data2[0].url3。

使用 promise 链式调用可以这样写代码：

promiseAjax('URL1')
  .then(data1 => promiseAjax(data1[0].url2))
  .then(data2 => promiseAjax(data2[0].url3);)
  .then(console.log(data3))
  .catch(e => console.log(e));

如果使用 Async 函数则可以像同步代码的一样写：

async function() {
  try {
    const data1 = await promiseAjax('URL1');
    const data2 = await promiseAjax(data1[0].url);
    const data3 = await promiseAjax(data2[0].url);
  } catch (e) {
    console.log(e);
  }
}

之所以可以这样用，是因为只有当前await等待的 promise 兑现后，它后面的代码才会执行（或者抛出错误，后面代码都不执行，直接去到 catch 分支）。

这里有两点值得关注:

1）await帮我们处理了 promise，要么返回兑现的值，要么抛出异常；
2）await在等待 promise 兑现的同时，整个 async 函数会挂起，promise 兑现后再重新执行接下来的代码。

无依赖关系的异步数据
可以借助Promise.all()在同一个 async 函数中并行处理多个无依赖关系的异步数据，如下：

async function fn1() {
  try {
    const arr = await Promise.all([
      promiseAjax("URL1"),
      promiseAjax("URL2"),
    ]);

    // ... do something
  } catch (e) {
    console.log(e);
  }
}

上面的内容是参考文章：https://segmentfault.com/a/1190000015735201

重点：
await在等待 promise 兑现的同时，整个 async 函数会挂起，promise 兑现后再重新执行接下来的代码。
所谓挂起状态，即是在等待await 后的promise对象兑现（等待promise执行resolve或reject方法）。