Iterator 和 Generator 是如何实现 async/await 的？一步步理清了吗？

在JavaScript的世界里，异步编程经历了从回调地狱到Promise链，最终演进到async/await语法的过程。当我们用着简洁的async/await时，是否想过它背后其实是基于ES6的Generator函数和Iterator协议实现的？本文将拆解其实现原理，带你看懂这个现代JavaScript最重要的语法糖究竟如何运转。

Generator函数通过function声明，其核心能力是暂停执行和恢复执行。通过yield关键字，函数可以在任意位置中断执行流：
“`javascript
function asyncGenerator() {
const result = yield fetch(‘/api/data’);
console.log(result);
}
“`
这个简单的示例展示了三个关键特性：
1. 通过yield暂停执行
2. 使用next()方法恢复执行
3. 支持双向通信（传递值到生成器内部）

当调用生成器函数时，实际得到一个迭代器对象：
“`javascript
const gen = asyncGenerator();
gen.next(); // 启动生成器
“`
每次调用next()都会返回包含value和done属性的对象，其中value是yield表达式的返回值，done表示生成器是否执行完毕。

通过Babel编译async函数，可以看到它被转换为：
“`javascript
// 原始代码
async function fetchData() {
const res = await fetch(‘/api’);
return res.json();
}

// 编译结果
function fetchData() {
return regeneratorRuntime.async(function() {
const res = yield regeneratorRuntime.awrap(fetch(‘/api’));
return res.json();
});
}
“`
这个转换过程揭示了两大关键：
1. async函数本质是Generator的封装
2. await等价于yield的增强版

核心在于regeneratorRuntime实现的自动执行器：
“`javascript
function asyncGeneratorStep(gen, resolve, reject, action, arg) {
try {
const { value, done } = gen[action](arg);
if (done) {
resolve(value);
} else {
Promise.resolve(value).then(
arg => asyncGeneratorStep(gen, resolve, reject, “next”, arg),
err => asyncGeneratorStep(gen, resolve, reject, “throw”, err)
);
}
} catch (error) {
reject(error);
}
}
“`
这个递归函数完成了：
1. 持续调用next()推进生成器
2. 将yield值包装为Promise
3. 实现错误冒泡机制

Iterator 和 Generator 是如何实现 async/await 的？一步步理清了吗？
（流程说明：生成器执行 → yield暂停 → Promise解析 → 自动恢复执行）

在UWP应用开发中，典型的异步操作如下所示：
“`javascript
private async void LoadModel() {
StorageFile modelFile = await StorageFile.GetFileFromApplicationUriAsync(
new Uri(“ms-appx:///Assets/model.onnx”));
model = await BearClassificationModel.CreateModel(modelFile);
}
“`
这个模式完美解决了传统异步回调的三大痛点：
1. 嵌套层次问题
2. 错误处理分散
3. 上下文丢失问题