分析 `async/await` 在内部是如何通过 `Generator` (`yield`) 和 `Promise` 来实现其控制流的。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位朋友，大家好！今天咱们来聊聊 async/await 这对“神仙眷侣”背后的秘密。别看它们用起来简洁明了，像魔法一样，但实际上，它们的实现离不开两位“幕后英雄”：Generator (配合 yield) 和 Promise。咱们的目标是，把 async/await 扒个精光，看看它到底是怎么用 Generator 和 Promise 来“瞒天过海”，实现异步控制流的。

一、async/await：表面光鲜的语法糖

首先，我们要明确一点：async/await 本身就是一种语法糖，是用来简化异步编程的。它让我们可以用同步的方式写异步代码，避免了回调地狱或者 .then 的链式调用。让我们先看一个简单的例子：

async function fetchData() {
  console.log("开始获取数据...");
  const data = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const jsonData = await data.json();
  console.log("获取到的数据:", jsonData);
  return jsonData;
}

fetchData();

这段代码看起来就像同步代码一样，先 console.log，然后 fetch 数据，再把数据转换成 JSON，最后 console.log 并返回。但实际上，fetch 是一个异步操作，await 在这里起到了关键作用。它让 fetchData 函数暂停执行，直到 fetch 返回的 Promise resolve。

二、Generator + yield：异步的“暂停”与“恢复”

Generator 函数是 ES6 引入的一个强大特性。它允许函数“暂停”执行，并在之后“恢复”执行。这种能力，简直就是为异步控制流量身定做的。

一个 Generator 函数的定义和调用方式如下：

function* myGenerator() {
  console.log("Generator 开始执行...");
  yield 1;
  console.log("Generator 恢复执行，yield 1 之后...");
  yield 2;
  console.log("Generator 再次恢复执行，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 }

这里有几个关键点：

function* 声明一个 Generator 函数。
yield 关键字用于暂停函数的执行，并返回一个值。
gen.next() 用于恢复函数的执行，并返回一个对象，包含 value (yield 的值) 和 done (是否执行完毕) 两个属性。

Generator 的这种“暂停”和“恢复”的特性，让我们可以在异步操作完成之后，再继续执行函数。这就为实现 async/await 提供了基础。

三、Promise：异步操作的“承诺”

Promise 相信大家都比较熟悉，它代表一个异步操作的最终完成（或失败）。它可以让我们更优雅地处理异步操作，避免回调地狱。

一个简单的 Promise 例子：

function myAsyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("操作成功！");
    }, 1000);
  });
}

myAsyncFunction()
  .then(result => {
    console.log(result); // 操作成功！
  })
  .catch(error => {
    console.error(error);
  });

Promise 有三个状态：

pending (进行中)
fulfilled (已完成)
rejected (已拒绝)

当 Promise 的状态变为 fulfilled 或 rejected 时，会分别调用 .then 或 .catch 方法。

四、async/await 的内部实现：Generator + Promise 的完美结合

现在，我们来揭开 async/await 的神秘面纱，看看它到底是如何利用 Generator 和 Promise 实现的。

简单来说，async/await 的转换过程可以概括为：

async 函数会被转换成一个 Generator 函数。
await 关键字会被转换成 yield 表达式，用于暂停 Generator 函数的执行。
yield 后面通常跟着一个 Promise 对象。
当 Promise resolve 时，Generator 函数会恢复执行。

让我们用一个例子来说明：

async function myAsyncFunction() {
  console.log("开始执行...");
  const result = await new Promise(resolve => setTimeout(() => resolve("Hello!"), 1000));
  console.log("获取到的结果:", result);
  return result;
}

myAsyncFunction();

这段代码会被转换成类似下面的代码：

function myAsyncFunction() {
  return new Promise((resolve, reject) => {
    const gen = (function* () {
      console.log("开始执行...");
      const result = yield new Promise(resolve => setTimeout(() => resolve("Hello!"), 1000));
      console.log("获取到的结果:", result);
      return result;
    })();

    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(() => gen.next(v));
        },
        function (err) {
          step(() => gen.throw(err));
        }
      );
    }

    step(() => gen.next(undefined));
  });
}

myAsyncFunction();

这段转换后的代码看起来有点复杂，但我们可以把它分解成几个部分：

Generator 函数： 原始的 async 函数被转换成一个 Generator 函数，用 function* 声明。
yield 表达式： await 关键字被转换成 yield 表达式，用于暂停 Generator 函数的执行。 yield 后面跟着一个 Promise 对象。
step 函数： 这个函数负责驱动 Generator 函数的执行。它会调用 gen.next() 方法，获取 yield 返回的值。如果 yield 返回的值是一个 Promise，step 函数会等待 Promise resolve，然后再次调用 gen.next() 方法，并将 Promise resolve 的值传递给 Generator 函数。如果Promise reject, 则调用 gen.throw()
Promise.resolve()： 确保 yield 后的值是一个 Promise 对象。如果不是，就把它包装成一个 Promise 对象。
gen.next(undefined)： 启动 Generator 函数的执行。

step 函数是整个转换过程的核心。它通过递归调用 gen.next() 方法，不断地驱动 Generator 函数的执行，直到 Generator 函数执行完毕。

五、一个更详细的例子，彻底理解async/await的实现

为了更深入地理解 async/await 的实现，我们再来看一个更详细的例子：

async function fetchData() {
  console.log("开始获取数据...");
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  console.log("获取到response...");
  const data = await response.json();
  console.log("获取到的数据:", data);
  return data;
}

fetchData();

这个例子包含两个 await 表达式，分别用于等待 fetch 和 response.json() 的结果。

下面是这段代码的转换后的简化版本（为了方便理解，省略了一些错误处理的细节）：

function fetchData() {
  return new Promise((resolve, reject) => {
    const gen = (function* () {
      console.log("开始获取数据...");
      const response = yield fetch('https://jsonplaceholder.typicode.com/todos/1');
      console.log("获取到response...");
      const data = yield response.json();
      console.log("获取到的数据:", data);
      return data;
    })();

    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(() => gen.next(v));
        },
        function (err) {
          step(() => gen.throw(err));
        }
      );
    }

    step(() => gen.next(undefined));
  });
}

fetchData();

让我们一步步地分析这段代码的执行过程：

fetchData() 被调用： 创建一个新的 Promise 对象，并启动 Generator 函数 gen。
step(() => gen.next(undefined)) 被调用： 启动 Generator 函数的执行。
console.log("开始获取数据...") 执行： 控制台输出 "开始获取数据…"。
yield fetch('https://jsonplaceholder.typicode.com/todos/1') 执行： fetch 函数被调用，返回一个 Promise 对象。 yield 表达式暂停 Generator 函数的执行，并将 Promise 对象返回给 step 函数。
Promise.resolve(next.value).then(...) 执行： step 函数等待 fetch 返回的 Promise resolve。
fetch 返回的 Promise resolve： step 函数调用 gen.next(response)，将 response 对象传递给 Generator 函数。
response 赋值给 response 变量： const response = yield fetch(...) 语句中的 response 变量被赋值为 fetch 返回的 response 对象。
console.log("获取到response...") 执行： 控制台输出 "获取到response…"。
yield response.json() 执行： response.json() 方法被调用，返回一个 Promise 对象。 yield 表达式再次暂停 Generator 函数的执行，并将 Promise 对象返回给 step 函数。
Promise.resolve(next.value).then(...) 再次执行： step 函数等待 response.json() 返回的 Promise resolve。
response.json() 返回的 Promise resolve： step 函数调用 gen.next(data)，将 JSON 数据传递给 Generator 函数。
data 赋值给 data 变量： const data = yield response.json() 语句中的 data 变量被赋值为 JSON 数据。
console.log("获取到的数据:", data) 执行： 控制台输出 "获取到的数据:" 和 JSON 数据。
return data 执行： Generator 函数执行完毕，返回 JSON 数据。
step 函数中的 resolve(next.value) 被调用： fetchData() 返回的 Promise resolve，并将 JSON 数据传递给 Promise 的 .then 方法。

通过这个例子，我们可以看到 async/await 是如何利用 Generator 和 Promise 实现异步控制流的。 Generator 负责暂停和恢复函数的执行，Promise 负责处理异步操作的结果。

六、总结：async/await 的优点和缺点

最后，我们来总结一下 async/await 的优点和缺点：

优点	缺点
代码更简洁易读，更像同步代码	需要 ES2017 或更高版本的 JavaScript 环境支持
避免回调地狱和 `.then` 的链式调用	错误处理需要使用 `try...catch` 语句
提高了代码的可维护性和可测试性	调试可能比回调函数更复杂
更好地处理异步错误（通过 `try...catch`）	性能上可能有轻微的损耗

总的来说，async/await 是一种非常强大的异步编程工具，它可以让我们更优雅地处理异步操作。虽然它有一些缺点，但它的优点远远大于缺点。在现代 JavaScript 开发中，async/await 已经成为一种主流的异步编程方式。

七、额外思考：与其他异步方案的比较

特性/方案	回调函数	Promise	async/await
结构化/可读性	差，容易形成回调地狱	较好，链式调用可读性尚可	最好，接近同步代码的写法
错误处理	容易忽略错误，需要手动处理	使用 `.catch()` 集中处理	使用 `try/catch` 结构化处理
异步操作并行	需要手动管理，较为复杂	使用 `Promise.all()` 或 `Promise.race()`	较为复杂，但可以通过 Promise 组合实现
条件异步执行	代码分散，逻辑复杂	链式调用，逻辑相对清晰	使用 `if/else` 等条件语句，逻辑清晰
调试	困难，堆栈信息不清晰	相对容易，但链式调用仍然可能导致堆栈信息冗余	相对容易，堆栈信息更清晰，接近同步代码的调试体验
兼容性	最好，所有 JavaScript 环境都支持	ES6 引入，需要 Polyfill 兼容老版本	ES2017 引入，需要 Polyfill 兼容老版本

总结的总结

今天我们深入探讨了 async/await 的实现原理，了解了它是如何通过 Generator 和 Promise 来实现异步控制流的。希望通过今天的讲解，大家对 async/await 有了更深入的理解，也能更好地运用它来编写高质量的异步代码。下次再遇到 async/await，你就可以自信地说：“哼，我已经看穿你了！”。

感谢大家的聆听！祝大家编程愉快！

发表回复 取消回复

发表回复取消回复