Generator函数通过yield暂停执行并交出控制权，外部执行器用next()恢复执行并将结果传回，从而将异步流程线性化。其优势在于避免回调地狱、实现清晰的同步式代码结构、支持try…catch统一错误处理，并可通过执行器自动推进。相比async/await，Generator更灵活，支持双向通信、手动控制迭代及自定义任务调度，适用于需精细控制的复杂场景。
Generator函数通过其独特的
yield
暂停执行和
next()
恢复机制，为处理复杂的异步流程提供了一种线性的、可控的解决方案。它允许我们将原本嵌套深重、难以理解的回调或Promise链式调用，转换成一种更接近同步代码的直观表达，极大地提升了代码的可读性和可维护性。
解决方案
要用Generator函数实现复杂的异步流程控制，核心在于理解
yield
关键字如何暂停Generator的执行，并“交出”一个值（通常是一个Promise），以及外部如何通过
next()
方法“喂回”结果并恢复执行。这本质上是构建一个简易的协程（coroutine）模型。
一个典型的模式是，我们定义一个Generator函数，在其中使用
yield
来等待异步操作的结果。外部需要一个“执行器”（runner或co-routine library）来迭代这个Generator，处理
yield
出来的Promise，并在Promise解决后，将结果通过
next()
传回Generator，使其从暂停的地方继续执行。
例如，我们有一个模拟异步请求的函数：
function fakeFetch(url) {
return new Promise(resolve => {
setTimeout(() => {
console.log(`Fetched data from ${url}`);
resolve({ url, data: `Some data for ${url}` });
}, Math.random() * 1000 + 500);
});
}
// 我们的异步流程Generator
function* asyncFlow() {
console.log('Step 1: Start fetching data1');
const result1 = yield fakeFetch('https://api.example.com/data1');
console.log('Step 2: Data1 received:', result1.data);
console.log('Step 3: Start fetching data2 based on data1');
const result2 = yield fakeFetch(`https://api.example.com/data2?id=${result1.data.split(' ')[2]}`);
console.log('Step 4: Data2 received:', result2.data);
console.log('Step 5: Process both results');
return `Final result: ${result1.data} and ${result2.data}`;
}
然后，我们需要一个执行器来驱动这个
asyncFlow
Generator：
function run(generator) {
const it = generator(); // 获取迭代器
function go(result) {
if (result.done) return result.value; // Generator执行完毕，返回最终值
return Promise.resolve(result.value).then(
value => go(it.next(value)), // 异步操作成功，将结果传回Generator
error => go(it.throw(error)) // 异步操作失败，将错误抛回Generator
);
}
return go(it.next()); // 启动Generator
}
// 运行我们的异步流程
run(asyncFlow).then(finalResult => {
console.log('All done! Final output:', finalResult);
}).catch(error => {
console.error('Flow error:', error);
});
通过这种方式，原本需要层层嵌套回调或Promise
.then()
链的逻辑，被“拉平”成了看起来像同步代码的结构，这在阅读和理解上，简直是质的飞跃。
Generator函数在处理多层嵌套回调时有哪些优势？
说实话，我个人觉得Generator函数最直观、最让人眼前一亮的优势，就是它能彻底终结“回调地狱”那种让人头疼的局面。想想看，在Promise普及之前，处理多个相互依赖的异步操作，代码很快就会变成一个深度嵌套的金字塔，每一层都是一个回调函数，参数传递和错误处理简直是噩梦。
举个例子，假设我们要依次执行三个异步操作，每个操作都依赖前一个的结果：
// 回调地狱版
asyncOperation1(param1, function(err1, res1) {
if (err1) { /* handle error */ return; }
asyncOperation2(res1.id, function(err2, res2) {
if (err2) { /* handle error */ return; }
asyncOperation3(res2.token, function(err3, res3) {
if (err3) { /* handle error */ return; }
console.log('All done:', res3);
});
});
});
这种代码，别说维护了，光是看一眼都觉得眼睛疼。参数层层传递，错误处理也变得重复且易错。
一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。
29
查看详情
而用Generator函数，结合上面提到的执行器，这段逻辑会变得异常清晰：
function* sequentialAsyncFlow() {
try {
const res1 = yield asyncOperation1(param1);
const res2 = yield asyncOperation2(res1.id);
const res3 = yield asyncOperation3(res2.token);
console.log('All done:', res3);
} catch (error) {
console.error('An error occurred:', error);
}
}
// 假设 asyncOperationX 返回 Promise
// run(sequentialAsyncFlow);
你看，代码的执行流程变得一目了然，就像我们写同步代码一样，从上到下，一步一步。
yield
关键字在这里充当了一个“等待”的角色，它让Generator暂停，直到Promise解决。错误处理也变得简单，一个
try...catch
块就能覆盖整个异步链条，这简直是解放生产力。它把控制权从回调函数那里，拉回到我们的主逻辑流，这种掌控感是无与伦比的。
如何构建一个简易的Generator执行器（Runner）来自动化流程？
构建一个简易的Generator执行器，其实就是实现一个能自动调用
next()
并处理
yield
值的循环。这个执行器会持续推进Generator的执行，直到它完全完成。我来给你展示一个我自己常用的小型实现，它虽然简单，但足够说明原理，并且能处理Promise：
function co(generatorFn) {
return new Promise((resolve, reject) => {
const gen = generatorFn(); // 获取Generator的迭代器
function step(nextFn) {
let generatorResult;
try {
generatorResult = nextFn(); // 调用next()或throw()
} catch (err) {
return reject(err); // Generator内部抛出错误
}
const { value, done } = generatorResult;
if (done) {
return resolve(value); // Generator执行完毕
}
// 确保yield的值是一个Promise，如果不是，也包装成Promise
Promise.resolve(value).then(
res => {
step(() => gen.next(res)); // Promise成功，将结果传回Generator
},
err => {
step(() => gen.throw(err)); // Promise失败，将错误抛回Generator
}
);
}
step(() => gen.next(undefined)); // 启动Generator，第一次next()不带参数
});
}
// 结合上面的asyncFlow Generator
// co(asyncFlow).then(finalResult => {
// console.log('Co-runner finished:', finalResult);
// }).catch(error => {
// console.error('Co-runner error:', error);
// });
这个
co
函数的工作原理是：
-
初始化：它接收一个Generator函数，并立即调用它来获取一个迭代器
gen
。
-
step
函数
：这是核心递归函数，负责推进Generator的执行。- 它首先尝试调用
nextFn()
（可能是
gen.next(value)
或
gen.throw(error)
）。
- 如果
nextFn()
调用时Generator内部抛出错误，直接
reject
外部的Promise。
- 检查
generatorResult.done
：如果为
true
，说明Generator已经执行完毕，此时
generatorResult.value
就是Generator的最终返回值，我们
resolve
外部的Promise。
- 如果
done
为
false
，说明Generator
yield
出了一个值。我们确保这个值是一个Promise（即使不是，
Promise.resolve()
也会将其包装成Promise）。
- 然后，我们等待这个Promise解决。
- 如果Promise成功，我们递归调用
step
，并传入一个函数，这个函数会在下一次调用时执行
gen.next(res)
，将Promise的结果传回Generator。
- 如果Promise失败，我们同样递归调用
step
，但这次传入
gen.throw(err)
，将错误抛回Generator，让Generator内部的
try...catch
有机会捕获。
- 如果Promise成功，我们递归调用
- 它首先尝试调用
-
启动：最后，通过
step(() => gen.next(undefined))
来启动整个流程。第一次
next()
通常不带参数，因为Generator刚开始执行，没有前一个
yield
的返回值。
这个执行器虽然简陋，但它完整地展现了Generator函数如何与外部环境协作，实现异步流程的自动化控制。理解了它，你就能明白像Koa 1.x或一些早期Node.js库是如何利用Generator来构建强大的中间件系统的。
Generator与async/await相比，其独特价值体现在哪里？
毫无疑问，
async/await
是现代JavaScript异步编程的首选，它简洁、易用，几乎完全取代了Promise链和回调。但如果说
async/await
是披着糖衣的Promise，那么Generator函数就是那个更底层的、更原始也更灵活的“骨架”。它们之间的关系，在我看来，有点像手动挡汽车和自动挡汽车。
async/await
是自动挡，它帮你处理了大部分细节，让你开起来更顺畅；而Generator是手动挡，你需要更多操作，但它能让你在某些极限场景下获得更精细的控制。
Generator的独特价值，主要体现在它更强的控制力和更广泛的适用性上：
-
手动迭代与细粒度控制：
async/await
强制你
await
一个Promise，并且一旦
await
，就必须等到Promise解决才能继续。但Generator的
yield
可以暂停任何值，不限于Promise。你可以
yield
一个普通值、一个函数、一个数组，甚至是一个自定义的“任务”对象。这意味着你可以设计更复杂的执行器，来处理各种非Promise的异步或同步任务。比如，你可以用Generator实现一个自定义的调度器，根据
yield
出的任务类型来决定是执行IO操作、CPU密集型计算还是等待用户输入。
-
构建自定义控制流：
async/await
的流程是线性的、单向的，一旦开始就只能向前。而Generator可以被外部环境多次
next()
，甚至可以根据外部输入动态调整内部逻辑。这让它非常适合构建状态机、协程或可暂停/可恢复的迭代器。例如，你可以用Generator实现一个游戏循环，每次
yield
出当前帧的状态，外部渲染器处理完后，再
next()
推进到下一帧。或者，你可以构建一个可暂停的动画序列，用户点击暂停，Generator就暂停，点击继续，就
next()
恢复。
-
双向通信能力：Generator的
next()
方法可以接收一个参数，这个参数会成为上一个
yield
表达式的返回值。这意味着外部环境不仅能获取Generator
yield
出的值，还能将值回传给Generator内部。这种双向通信能力是
async/await
所不具备的。在构建一些需要外部环境反馈或注入数据的复杂流程时，Generator的这种特性就显得尤为强大。比如，你可以用它来实现一个交互式的命令行工具，
yield
出问题，用户输入答案后，再通过
next(answer)
将答案传回Generator继续处理。
虽然在日常的异步请求处理中，
async/await
无疑是更优的选择，但Generator函数在那些需要更底层、更精细控制，或者需要构建非标准异步流程的场景下，依然展现出其不可替代的独特价值。它更像是一个工具箱里的高级工具，不是每天都用，但一旦遇到特定问题，它就能发挥出奇效。
大家都在看：
如何用Node.js流处理大规模文件读写？
什么是JavaScript的异步编程中的竞态条件问题，以及如何使用取消令牌或AbortController解决？
什么是JavaScript的代理在数据转换管道中的作用，以及它如何链式拦截并处理数据流？
JS Promise 实现原理 – 手写符合 Promises/A+ 规范的异步解决方案
暂无评论内容