各位观众老爷，今天咱们来聊聊 JavaScript 里那个让人又爱又恨，用起来像同步代码，实际上异步到骨子里的 async/await。 别看它现在风光无限，但究其本质，还是个“糖”。 今天咱们就扒开这层糖衣，看看它肚子里到底装的是啥。
一、Async/Await：同步的错觉，异步的真谛
async/await 出现之前，JavaScript 的异步操作，那是回调地狱、Promise Chain 的天下。 各种嵌套，各种 then，代码可读性简直让人崩溃。 就像这样：
// 回调地狱
asyncFunc1(function(result1) {
asyncFunc2(result1, function(result2) {
asyncFunc3(result2, function(result3) {
console.log('最终结果:', result3);
});
});
});
// Promise Chain
asyncFunc1()
.then(result1 => asyncFunc2(result1))
.then(result2 => asyncFunc3(result2))
.then(result3 => console.log('最终结果:', result3));而 async/await 的出现，简直就是救星。 它可以让你像写同步代码一样写异步代码，让代码看起来更清晰、更易懂。
// async/await
async function doSomething() {
const result1 = await asyncFunc1();
const result2 = await asyncFunc2(result1);
const result3 = await asyncFunc3(result2);
console.log('最终结果:', result3);
}
doSomething();看起来是不是清爽多了？ 但是，注意，这只是表象！ async/await 并没有改变 JavaScript 异步的本质。 它只是在语法层面做了一层封装，让异步代码看起来更像同步代码。
二、Async/Await 背后的秘密武器：Generator 和 Promise
async/await 的实现，离不开两个重要的概念： Generator 和 Promise。 如果把异步操作比作一场马拉松，那么 Promise 就像是接力棒，而 Generator 则像是一个暂停按钮，让你可以随时暂停和恢复执行。
-
Generator 函数：暂停的艺术
Generator 函数，是 ES6 引入的一个新特性。 它允许函数在执行过程中暂停，并在稍后恢复执行。 关键在于
function*声明和yield关键字。function* myGenerator() { console.log('开始执行'); yield 1; console.log('执行到 yield 1 之后'); yield 2; console.log('执行到 yield 2 之后'); return 3; } const gen = myGenerator(); console.log(gen.next()); // { value: 1, done: false } console.log(gen.next()); // { value: 2, done: false } console.log(gen.next()); // { value: 3, done: true } console.log(gen.next()); // { value: undefined, done: true }function*声明： 声明一个 Generator 函数。yield关键字： 暂停函数的执行，并返回一个对象，包含value和done两个属性。value是yield表达式的值，done表示 Generator 函数是否执行完毕。next()方法： 恢复 Generator 函数的执行，直到遇到下一个yield关键字或者函数执行完毕。
Generator 函数的强大之处在于，它可以在函数执行过程中，多次暂停和恢复执行。 这为异步操作提供了可能，因为我们可以在
yield处等待异步操作的结果。 -
Promise：异步操作的承诺
Promise，是 ES6 引入的另一个重要特性。 它代表一个异步操作的最终完成（或失败）及其结果值。
const myPromise = new Promise((resolve, reject) => { setTimeout(() => { const randomNumber = Math.random(); if (randomNumber > 0.5) { resolve(randomNumber); // 成功 } else { reject('数字太小了'); // 失败 } }, 1000); }); myPromise .then(result => { console.log('Promise 成功:', result); }) .catch(error => { console.error('Promise 失败:', error); });Promise构造函数： 接受一个函数作为参数，该函数接受resolve和reject两个函数作为参数。resolve()函数： 将 Promise 的状态设置为resolved（已完成），并传递结果值。reject()函数： 将 Promise 的状态设置为rejected（已拒绝），并传递错误信息。then()方法： 用于处理 Promise 成功的情况。catch()方法： 用于处理 Promise 失败的情况。
Promise 的关键在于，它可以将异步操作的结果，以一种可预测的方式进行处理。 无论异步操作成功还是失败，我们都可以通过
then()和catch()方法来处理结果。
三、Async/Await 的转换过程：Generator 和 Promise 的完美结合
现在，我们来看一下 async/await 是如何利用 Generator 和 Promise 来实现同步式的异步代码的。 简单来说，async/await 的转换过程，可以概括为以下几步：
async函数的转换：async函数会被转换为一个 Generator 函数。await表达式的转换：await表达式会被转换为yield表达式，并将 Promise 对象作为yield的值。- 自动执行 Generator 函数： 编译器会自动生成代码，来执行这个 Generator 函数，并在每次
yield之后，等待 Promise 对象的状态改变。
让我们通过一个例子来说明：
async function myAsyncFunction() {
const result1 = await asyncFunc1();
const result2 = await asyncFunc2(result1);
return result2;
}这段代码会被转换成类似下面的形式：
function myAsyncFunction() {
return new Promise((resolve, reject) => {
// Generator 函数
const gen = (function* () {
try {
const result1 = yield asyncFunc1();
const result2 = yield asyncFunc2(result1);
return result2;
} catch (e) {
return reject(e);
}
})();
// 自动执行 Generator 函数的 next 方法
function step(nextF) {
let next;
try {
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 (err) {
step(function () {
return gen.throw(err);
});
}
);
}
step(function () {
return gen.next(undefined);
});
});
}让我们一步一步地分析这个转换后的代码：
async函数被转换为返回 Promise 对象的函数：myAsyncFunction不再直接返回结果，而是返回一个 Promise 对象。 这个 Promise 对象的状态，取决于 Generator 函数的执行结果。- Generator 函数内部的
try...catch块： 用于捕获 Generator 函数执行过程中可能出现的错误，并将错误传递给 Promise 的reject方法。 step函数： 这是一个递归函数，用于自动执行 Generator 函数的next方法。- 它首先调用
nextF()来执行 Generator 函数的next方法。 - 如果
next.done为true，表示 Generator 函数执行完毕，将结果传递给 Promise 的resolve方法。 - 如果
next.done为false，表示 Generator 函数还没有执行完毕，需要等待 Promise 对象的状态改变。 Promise.resolve(next.value).then(...)： 将yield表达式返回的 Promise 对象，转换为一个 Promise 对象，并使用then()方法来处理 Promise 对象的状态改变。- 如果 Promise 对象的状态变为
resolved，将结果传递给gen.next(v)，继续执行 Generator 函数。 - 如果 Promise 对象的状态变为
rejected，将错误传递给gen.throw(err)，抛出异常。
- 如果 Promise 对象的状态变为
- 它首先调用
step(function () { return gen.next(undefined); });： 启动 Generator 函数的执行。
总结一下：
| 步骤 | 描述 |
|---|---|
1. async 函数转换成返回 Promise |
async function myAsyncFunction() => function myAsyncFunction() { return new Promise(...) } |
| 2. 创建 Generator 函数 | 在 Promise 构造函数内部，创建一个 Generator 函数，用于执行异步操作。 |
3. await 表达式转换成 yield |
await asyncFunc1() => yield asyncFunc1() |
| 4. 自动执行 Generator 函数 | 编译器自动生成 step 函数，递归调用 Generator 函数的 next 方法，并在每次 yield 之后，等待 Promise 对象的状态改变。 根据 Promise 对象的状态，决定是继续执行 Generator 函数，还是抛出异常。 |
四、Async/Await 的优势与局限
async/await 的优点：
- 代码可读性更高：
async/await可以让你像写同步代码一样写异步代码，使代码看起来更清晰、更易懂。 - 错误处理更方便： 可以使用
try...catch块来捕获异步操作中的错误，使错误处理更方便。 - 调试更简单： 可以使用调试器来单步执行
async/await代码，使调试更简单。
async/await 的局限：
- 需要 ES2017 支持：
async/await是 ES2017 引入的特性，需要在支持 ES2017 的环境中才能使用。 - 本质上还是异步：
async/await并没有改变 JavaScript 异步的本质，只是在语法层面做了一层封装。 因此，仍然需要注意异步操作的性能问题。 - 滥用会导致性能问题： 如果在一个
async函数中，有大量的await表达式，可能会导致性能问题。 因为每个await表达式都会暂停函数的执行，等待 Promise 对象的状态改变。
五、Async/Await 的最佳实践
- 尽量避免在循环中使用
await： 在循环中使用await会导致性能问题，因为每次循环都会暂停函数的执行。 可以考虑使用Promise.all()来并发执行异步操作。 - 使用
try...catch块来处理错误： 使用try...catch块可以捕获异步操作中的错误，使错误处理更方便。 - 注意异步操作的性能问题：
async/await并没有改变 JavaScript 异步的本质，因此仍然需要注意异步操作的性能问题。 可以使用性能分析工具来检测代码的性能瓶颈。
六、总结
async/await 是 JavaScript 中一个非常强大的特性，它可以让你像写同步代码一样写异步代码，使代码看起来更清晰、更易懂。 但是，async/await 并没有改变 JavaScript 异步的本质，只是在语法层面做了一层封装。 因此，在使用 async/await 时，仍然需要注意异步操作的性能问题。 理解 async/await 背后的转换过程，可以帮助你更好地理解 JavaScript 的异步机制，写出更高效、更可靠的代码。
好了，今天的讲座就到这里。 感谢各位的观看！ 咱们下期再见！