共计 3120 个字符，预计需要花费 8 分钟才能阅读完成。
前言
介于上一篇「今日头条」前端面试题和思路解析 中提到的 async/await，让我想起了之前写过的一篇文章，在此做个分享。它细说了什么是 async 函数，以及其相较于 Promise 的优势。
温故而知新，正文开始。
async 函数是什么？
谈及异步回调函数的嵌套，总会让人感到烦躁，特别是当业务逻辑复杂，往往需要调用几次 ajax 才能拿到所有需要的数据。
从最早的回调函数，到 Promise 对象，再到 Generator 函数，每次都有所改进，但又让人觉得不彻底。它们都有额外的复杂性，都需要理解抽象的底层运行机制。所以，我们需要一种方法，更优雅地解决异步操作。于是，async 函数出现了。
一句话解释：async 函数，就是 Generator 函数的语法糖。
它有以下几个特点：
建立在 promise 之上。所以，不能把它和回调函数搭配使用。但它会声明一个异步函数，并隐式地返回一个 Promise。因此可以直接 return 变量，无需使用 Promise.resolve 进行转换。
和 promise 一样，是非阻塞的。但不用写 then 及其回调函数，这减少代码行数，也避免了代码嵌套。而且，所有异步调用，可以写在同一个代码块中，无需定义多余的中间变量。
它的最大价值在于，可以使异步代码，在形式上，更接近于同步代码。
它总是与 await 一起使用的。并且，await 只能在 async 函数体内。
await 是个运算符，用于组成表达式，它会阻塞后面的代码。如果等到的是 Promise 对象，则得到其 resolve 值。否则，会得到一个表达式的运算结果。
为何说 async 函数是语法糖
async 函数的实现，其实就是将 Generator 函数和自动执行器，包装在一个函数里。下面的这个例子，来自阮老师的《async 函数的含义和用法》一文。
async function fn(args) {
// …
}
// 等同于
function fn(args) {
return spawn(function*() {
// …
});
}
// spawn 函数就是自动执行器
function spawn(genF) {
return new Promise(function(resolve, reject) {
var gen = genF();
function step(nextF) {
try {
var next = nextF();
} catch(e) {
return reject(e);
}
if(next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(function(v) {
step(function() {return gen.next(v); });
}, function(e) {
step(function() {return gen.throw(e); });
});
}
step(function() {return gen.next(undefined); });
});
}
所以说，async 函数是 Generator 函数的语法糖。另外，它相对较新，属于 ES7 中的语法。但是转码器 Babel 已经支持，转码后就能使用。
async 相较于 Promise 的优势
1. 相比于 Promise，它能更好地处理 then 链
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
现在用 Promise 方式来实现这三个步骤的处理。
function doIt() {
console.time(“doIt”);
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${result}`);
});
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
如果用 async/await 来实现的话，会是这样：
async function doIt() {
console.time(“doIt”);
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${result}`);
}
doIt();
结果和之前的 Promise 实现是一样的，但是这个代码看起来是不是清晰得多，几乎跟同步代码一样。
2. 中间值
现在把业务要求改一下，仍然是三个步骤，但每一个步骤都需要之前每个步骤的结果。Pomise 的实现看着很晕，传递参数太过麻烦。
function doIt() {
console.time(“doIt”);
const time1 = 300;
step1(time1)
.then(time2 => {
return step2(time1, time2)
.then(time3 => [time1, time2, time3]);
})
.then(times => {
const [time1, time2, time3] = times;
return step3(time1, time2, time3);
})
.then(result => {
console.log(`result is ${result}`);
});
}
doIt();
用 async/await 来写：
async function doIt() {
console.time(“doIt”);
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time1, time2);
const result = await step3(time1, time2, time3);
console.log(`result is ${result}`);
}
doIt();
没有多余的中间值，更加优雅地实现了。
3. 调试
相比于 Promise 更易于调试。
因为没有代码块，所以不能在一个返回的箭头函数中设置断点。如果你在一个 .then 代码块中使用调试器的步进 (step-over) 功能，调试器并不会进入后续的 .then 代码块，因为调试器只能跟踪同步代码的每一步。
现在，如果使用 async/await，你就不必再使用箭头函数。你可以对 await 语句执行步进操作，就好像他们都是普通的同步语句一样。
总结
JavaScript 的异步编写方式，从 回调函数 到 Promise、Generator 再到 Async/Await。表面上只是写法的变化，但本质上则是语言层的一次次抽象。让我们可以用更简单的方式实现同样的功能，而不需要去考虑代码是如何执行的。
换句话说就是：异步编程的最高境界，就是根本不用关心它是不是异步。
参考文献
async 函数的含义和用法
(译) 6 个 Async/Await 优于 Promise 的方面
PS：欢迎关注我的公众号“超哥前端小栈”，交流更多的想法与技术。
