解决回调地狱的异步操作，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