Async 函数的使用及简单实现

解决回调地狱的异步操作，Async 函数是终极办法，但了解生成器和 Promise 有助于理解 Async 函数原理。由于内容较多，分三部分进行，这是第三部分，介绍 Async 函数相关。第一部分介绍 Generator，第二部分介绍 Promise。

在这部分中，我们会先介绍 Async 函数的基本使用，然后会结合前两部分介绍的生成器和 Promise 实现一个 async 函数。

1）Async 函数概览

1.1 概念

通过在普通函数前加async操作符可以定义 Async 函数：

// 这是一个 async 函数
async function() {}

Async 函数体中的代码是异步执行的，不会阻塞后面代码执行，但它们的写法和同步代码相似。

Async 函数会 返回一个已完成的 promise 对象，实际在使用的时候会和await操作符配合使用，在介绍await之前，我们先看看 async 函数本身有哪些特点。

1.2 Async 函数基本用法

1.2.1 函数体内没有 await

如果 async 函数体内如果没有await操作符，那么它返回的 promise 对象状态和他的函数体内代码怎么写有关系，具体和 promise 的then()方法的处理方式相同：

1）没有显式 return 任何数据

此时默认返回Promise.resolve():

var a = (async () => {})();

相当于

var a = (async () => {
  return Promise.resolve();
})();

此时 a 的值：

a {
  [[PromiseStatus]]: 'resolved',
  [[PromiseValue]]: undefined
}

2）显式 return 非 promise

相当于返回Promise.resolve(data)

var a = (async () => {
  return 111;
})();

相当于

var a = (async () => {
  return Promise.resolve(111);
})();

此时 a 的值：

a {
  [[PromiseStatus]]: 'resolved',
  [[PromiseValue]]: 111
}

3）显式 return promise 对象

此时 async 函数返回的 promise 对象状态由显示返回的 promise 对象状态决定，这里以被拒绝的 promise 为例：

var a = (async () => Promise.reject(111))();

此时 a 的值：

a {
  [[PromiseStatus]]: 'rejected',
  [[PromiseValue]]: 111
}

但实际使用中，我们不会向上面那样使用，而是配合await操作符一起使用，不然像上面那样，和 promise 相比，并没有优势可言。特别的，没有await操作符，我们并不能用 async 函数解决相互依赖的异步数据的请求问题。

换句话说：我们不关心 async 返回的 promise 状态（通常情况，async 函数不会返回任何内容，即默认返回Promise.resolve()），我们关心的是 async 函数体内的代码怎么写，因为里面的代码可以异步执行且不阻塞 async 函数后面代码的执行，这就为写异步代码创造了条件，并且书写形式上和同步代码一样。

1.2.2 await 介绍

await操作符使用方式如下：

[rv] = await expression;

expression：可以是任何值，但通常是一个 promise；

rv: 可选。如果有且 expression 是非 promise 的值，则 rv 等于 expression 本身；不然，rv 等于 兑现 的 promise 的值，如果该 promise 被拒绝，则抛个异常（所以await一般被 try-catch 包裹，异常可以被捕获到）。

但注意await必须在 async 函数中使用，不然会报语法错误。

1.2.3 await 使用

看下面代码例子：

1）expression 后为非 promise

(async () => {
  const b = await 111;
  console.log(b); // 111
})();

直接返回这个 expression 的值，即，打印 111。

2）expression 为兑现的 promise

(async () => {
  const b = await Promise.resolve(111);
  console.log(b); // 111
})();

返回兑现的 promise 的值，所以打印111。

3）expression 为拒绝的 promise

(async () => {
  try {
    const b = await Promise.reject(111);

    // 前面的 await 出错后，当前代码块后面的代码就不执行了
    console.log(b); // 不执行
  } catch (e) {
    console.log("出错了：", e); // 出错了：111
  }
})();

如果await后面的 promise 被拒绝或本身代码执行出错都会抛出一个异常，然后被 catch 到，并且，和当前await同属一个代码块的后面的代码不再执行。

2）Async 函数处理异步请求

2.1 相互依赖的异步数据

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

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

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

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

promiseAjax 在 第二部分介绍 promise 时在 3.1 中定义的，通过 promise 封装的 ajax GET 请求。

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 兑现后再重新执行接下来的代码。

对于第 2 点，是不是想到了生成器？在 1.4 节中我们会通过生成器 + promise 自己写一个 async 函数。

2.2 无依赖关系的异步数据

Async 函数没有Promise.all()之类的方法，我们需要写多几个 async 函数。

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

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

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

感谢 @贾顺名 的 评论

但实际开发中如果异步请求的数据是业务不相关的，不推荐这样写，原因如下：

把所有的异步请求放在一个 async 函数中相当于手动加强了业务代码的耦合，会导致下面两个问题：

1）写代码及获取数据都不直观，尤其请求多起来的时候；
2）Promise.all里面写多个无依赖的异步请求，如果 其中一个被拒绝或发生异常，所有请求的结果我们都获取不到。

如果业务场景是不关心上面两点，可以考虑使用上面的写法，不然，每个异步请求都放在不同的 async 函数中发出。

下面是分开写的例子：

async function fn1() {
  try {
    const data1 = await promiseAjax("URL1");

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

async function fn2() {
  try {
    const data2 = await promiseAjax("URL2");

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

3）Async 模拟实现

3.1 async 函数处理异步数据的原理

我们先看下 async 处理异步的原理：

• async 函数遇到await操作符会挂起；
• await后面的表达式求值（通常是个耗时的异步操作）前 async 函数一直处于挂起状态，避免阻塞 async 函数后面的代码；
• await后面的表达式求值求值后（异步操作完成），await可以对该值做处理：如果是非 promise，直接返回该值；如果是 promsie，则提取 promise 的值并返回。同时告诉 async 函数接着执行下面的代码；
• 哪里出现异常，结束 async 函数。

await后面的那个异步操作，往往是返回 promise 对象（比如 axios），然后交给 await 处理，毕竟，async-await 的设计初衷就是为了解决异步请求数据时的回调地狱问题，而使用 promise 是关键一步。

async 函数本身的行为，和生成器类似；而await等待的通常是 promise 对象，也正因如此，常说 async 函数是 生成器 + promise 结合后的语法糖。

既然我们知道了 async 函数处理异步数据的原理，接下来我们就简单模拟下 async 函数的实现过程。

3.2 async 函数简单实现

这里只模拟 async 函数配合await处理网络请求的场景，并且请求最终返回 promise 对象，async 函数本身返回值（已完成的 promise 对象）及更多使用场景这里没做考虑。

所以接下来的 myAsync 函数只是为了说明 async-await 原理，不要将其用在生产环境中。

3.2.1 代码实现

/**
 * 模拟 async 函数的实现，该段代码取自 Secrets of the JavaScript Ninja (Second Edition)，p159
 */
// 接收生成器作为参数，建议先移到后面，看下生成器中的代码
var myAsync = generator => {
  // 注意 iterator.next() 返回对象的 value 是 promiseAjax()，一个 promise
  const iterator = generator();

  // handle 函数控制 async 函数的 挂起-执行
  const handle = iteratorResult => {
    if (iteratorResult.done) return;

    const iteratorValue = iteratorResult.value;

    // 只考虑异步请求返回值是 promise 的情况
    if (iteratorValue instanceof Promise) {
      // 递归调用 handle，promise 兑现后再调用 iterator.next() 使生成器继续执行
      // ps.原书then最后少了半个括号 ')'
      iteratorValue
        .then(result => handle(iterator.next(result)))
        .catch(e => iterator.throw(e));
    }
  };

  try {
    handle(iterator.next());
  } catch (e) {
    console.log(e);
  }
};

3.2.2 使用

myAsync接收的一个生成器作为入参，生成器函数内部的代码，和写原生 async 函数类似，只是用yield代替了await

myAsync(function*() {
  try {
    const a = yield Promise.resolve(1);
    const b = yield Promise.resolve(a + 10);
    const c = yield Promise.resolve(b + 100);
    console.log(a, b, c); // 输出 1，11，111
  } catch (e) {
    console.log("出错了：", e);
  }
});

上面会打印1 11 111。

如果第二个yield语句后的 promise 被拒绝Promise.reject(a + 10)，则打印出错了：11。

3.2.3 说明：

• myAsync 函数接受一个生成器作为参数，控制生成器的 挂起 可达到使整个 myAsync 函数在异步代码请求过程 挂起 的效果；
• myAsync 函数内部通过定义handle函数，控制生成器的 _挂起-执行_。

具体过程如下：

1）首先调用generator()生成它的控制器，即迭代器iterator，此时，生成器处于挂起状态；
2）第一次调用handle函数，并传入iterator.next()，这样就完成生成器的第一次调用的；
3）执行生成器，遇到yield生成器再次挂起，同时把yield后表达式的结果（未完成的 promise）传给 handle；
4）生成器挂起的同时，异步请求还在进行，异步请求完成（promise 兑现）后，会调用handle函数中的iteratorValue.then()；
5）iteratorValue.then()执行时内部递归调用handle，同时把异步请求回的数据传给生成器（iterator.next(result)），生成器更新数据再次执行。如果出错直接结束；
6）3、4、5 步重复执行，直到生成器结束，即iteratorResult.done === true，myAsync 结束调用。

如果看不明白，可参考下 第一部分 生成器相关和 第二部分 Promise 相关。

参考

【1】[美]JOHN RESIG,BEAR BIBEAULT and JOSIP MARAS 著（2016），Secrets of the JavaScript Ninja (Second Edition)，p159，Manning Publications Co.
【2】async function-MDN
【3】await-MDN
【4】理解 JavaScript 的 async/await