好的，各位观众老爷，大家好！今天咱们不开车，来聊聊 JavaScript 里的一个“高富帅”语法糖：async/await。 这家伙自从出道以来，就深受广大程序员的喜爱，因为它不仅能让我们告别恶心的回调地狱，还能让异步代码写得跟同步代码一样丝滑流畅。
那么问题来了，这 async/await 到底是怎么做到的？ 引擎内部又藏着什么不可告人的秘密呢？ 别急，今天就让我来给大家扒一扒它的底裤，啊不，是源码，揭秘它背后的实现机制。
第一幕：回调地狱，不堪回首的往事
在 async/await 出现之前，我们处理异步操作，那简直就是噩梦。 特别是当多个异步操作之间存在依赖关系时，代码会像俄罗斯套娃一样，一层套一层，最终变成一坨难以维护的意大利面条。
举个栗子：
function getUser(userId, callback) {
setTimeout(() => {
const user = { id: userId, name: '张三' };
callback(user);
}, 500);
}
function getOrders(userId, callback) {
setTimeout(() => {
const orders = ['订单1', '订单2'];
callback(orders);
}, 300);
}
function getOrderDetails(orderId, callback) {
setTimeout(() => {
const details = { id: orderId, price: 100 };
callback(details);
}, 200);
}
// 回调地狱的雏形
getUser(123, (user) => {
getOrders(user.id, (orders) => {
getOrderDetails(orders[0], (details) => {
console.log('用户:', user, '订单:', orders, '详情:', details);
});
});
});这段代码虽然简单，但是已经能看出回调地狱的苗头了。 想象一下，如果逻辑再复杂一些，回调嵌套的层数再多一些，那简直就是一场灾难。 代码的可读性、可维护性都会直线下降， 调试起来更是让人头皮发麻。
第二幕：Promise 横空出世，力挽狂澜
为了解决回调地狱的问题， ES6 引入了 Promise。 Promise 本质上是一个代表异步操作最终完成或失败的对象。 它可以让我们将异步操作的结果以链式调用的方式串联起来，从而避免了回调的层层嵌套。
上面的例子用 Promise 改写一下：
function getUser(userId) {
return new Promise(resolve => {
setTimeout(() => {
const user = { id: userId, name: '张三' };
resolve(user);
}, 500);
});
}
function getOrders(userId) {
return new Promise(resolve => {
setTimeout(() => {
const orders = ['订单1', '订单2'];
resolve(orders);
}, 300);
});
}
function getOrderDetails(orderId) {
return new Promise(resolve => {
setTimeout(() => {
const details = { id: orderId, price: 100 };
resolve(details);
}, 200);
});
}
getUser(123)
.then(user => getOrders(user.id))
.then(orders => getOrderDetails(orders[0]))
.then(details => {
console.log('详情:', details);
});虽然 Promise 解决了一部分问题，但是链式调用仍然显得有些冗长，不够直观。 特别是当链式调用比较长的时候，代码的可读性也会受到影响。
第三幕：Async/Await 闪亮登场，终结回调
终于，我们的主角 async/await 登场了！ 它可以让我们以同步的方式编写异步代码，从而彻底告别回调地狱。
再用 async/await 改写一下上面的例子：
async function fetchData() {
const user = await getUser(123);
const orders = await getOrders(user.id);
const details = await getOrderDetails(orders[0]);
console.log('用户:', user, '订单:', orders, '详情:', details);
}
fetchData();是不是感觉清爽多了？ 代码看起来就像是同步代码一样， 一行一行地执行， 非常直观。
第四幕：Async/Await 背后的秘密，生成器函数（Generator Function）
async/await 的魔法背后，其实是生成器函数（Generator Function）在默默地支撑。
生成器函数 是一种特殊的函数，它可以被暂停和恢复执行。 它的定义方式是在 function 关键字后面加上一个星号 *。
function* myGenerator() {
console.log('第一步');
yield 1;
console.log('第二步');
yield 2;
console.log('第三步');
return 3;
}
const generator = myGenerator();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: true }yield关键字用于暂停生成器函数的执行，并将后面的值返回。next()方法用于恢复生成器函数的执行，并返回一个包含value和done属性的对象。value属性表示yield关键字后面的值，done属性表示生成器函数是否执行完毕。
Async/Await 的工作原理：
async关键字：async关键字用于声明一个异步函数。 异步函数会返回一个 Promise 对象。await关键字：await关键字只能在async函数中使用。 它用于暂停异步函数的执行，直到后面的 Promise 对象 resolve。await表达式会返回 Promise 对象 resolve 的值。
引擎内部的实现：
当 JavaScript 引擎遇到 async 函数时，它会将该函数转换成一个状态机，利用生成器函数来实现异步操作的暂停和恢复。
具体来说：
- 引擎会将
async函数中的await表达式转换成yield表达式。 - 当遇到
await表达式时，引擎会暂停函数的执行，并将 Promise 对象传递给生成器函数的next()方法。 - 当 Promise 对象 resolve 时，引擎会恢复函数的执行，并将 Promise 对象 resolve 的值作为
yield表达式的返回值。
为了更好地理解这个过程，我们可以用 Babel 将 async/await 代码转换成 ES5 代码，从而看到它背后的真实面目。
// Async/Await 代码
async function fetchData() {
const user = await getUser(123);
const orders = await getOrders(user.id);
const details = await getOrderDetails(orders[0]);
console.log('用户:', user, '订单:', orders, '详情:', details);
}// Babel 转换后的 ES5 代码
function fetchData() {
return regeneratorRuntime.async(function fetchData$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return getUser(123);
case 2:
user = _context.sent;
_context.next = 5;
return getOrders(user.id);
case 5:
orders = _context.sent;
_context.next = 8;
return getOrderDetails(orders[0]);
case 8:
details = _context.sent;
console.log('用户:', user, '订单:', orders, '详情:', details);
case 10:
case "end":
return _context.stop();
}
}
});
}可以看到， Babel 将 async 函数转换成了一个使用了 regeneratorRuntime 的函数。 regeneratorRuntime 是一个用于支持生成器函数的库。
第五幕：Async/Await 的优势与局限
优势：
- 代码简洁易懂： async/await 可以让我们以同步的方式编写异步代码，代码的可读性和可维护性大大提高。
- 告别回调地狱： async/await 可以让我们避免回调的层层嵌套，从而彻底告别回调地狱。
- 错误处理方便： async/await 可以让我们使用
try...catch语句来捕获异步操作中的错误，就像处理同步代码一样方便。 - 调试方便： async/await 可以让我们像调试同步代码一样调试异步代码，方便快捷。
局限：
- 需要 Promise 支持：
await关键字只能用于等待 Promise 对象 resolve， 如果等待的是其他类型的值，则会被自动转换成 Promise 对象。 - 性能损耗： async/await 本质上是语法糖，虽然它能提高代码的可读性和可维护性，但也会带来一定的性能损耗。 因为引擎需要将 async 函数转换成状态机，并利用生成器函数来实现异步操作的暂停和恢复。
- 浏览器兼容性： 虽然现代浏览器都支持 async/await，但是在一些老旧的浏览器中可能需要使用 Babel 进行转换。
第六幕：Async/Await 的使用技巧
- 并行执行异步操作： 可以使用
Promise.all()方法来并行执行多个异步操作。
async function fetchData() {
const [user, orders] = await Promise.all([getUser(123), getOrders(123)]);
console.log('用户:', user, '订单:', orders);
}- 处理多个 await 表达式： 可以使用
try...catch语句来捕获多个await表达式中的错误。
async function fetchData() {
try {
const user = await getUser(123);
const orders = await getOrders(user.id);
const details = await getOrderDetails(orders[0]);
console.log('用户:', user, '订单:', orders, '详情:', details);
} catch (error) {
console.error('发生错误:', error);
}
}- 避免过度使用 await： 如果异步操作之间没有依赖关系，可以避免使用
await关键字，从而提高代码的执行效率。
总结：
| 特性 | Async/Await | Promise | Callback |
|---|---|---|---|
| 代码可读性 | 高 | 中 | 低 |
| 错误处理 | try/catch | .catch() | 复杂，需要在每个回调中处理 |
| 调试难度 | 低 | 中 | 高 |
| 并行执行 | Promise.all | Promise.all | 需要手动管理 |
| 性能 | 稍慢 | 中等 | 最快，但容易出错 |
| 适用场景 | 复杂异步流程 | 简单的异步流程，或者对性能要求非常高的场景 | 已经过时，不推荐使用 |
总的来说， async/await 是一种非常强大的语法糖， 它可以让我们以更加优雅的方式编写异步代码。 虽然它有一定的性能损耗，但是在大多数情况下， 这种损耗是可以忽略不计的。 因此， 建议大家在开发 JavaScript 应用时， 尽量使用 async/await 来处理异步操作。
好了，今天的讲座就到这里。 希望大家能够对 async/await 有更深入的了解。 感谢各位的观看，我们下次再见！