很多同学一看到 function* 和 yield 就本能地想关文章：看起来又难、又少用。
但其实，生成器（Generator）是 JS 里少见的"会暂停的函数"，写好了不仅能让异步逻辑更优雅，还能在处理流式数据（比如大模型回复、SSE 等）时非常顺手。
这篇文章不讲花里胡哨的理论，而是带你一步步搞清楚：
- 生成器到底是什么？和普通函数有什么本质区别？
- 怎么用
next()和for...of去"消费"一个生成器？ - 在 Node.js / 浏览器里，生成器在哪些场景是真的好用？
- 如何结合 SSE，把大模型这种流式输出封装成一个好用的异步生成器？
看完你可以不爱它，但至少不会再怕它。
1. 生成器是什么？一句话版本
用一句话概括：
生成器函数 = 可以中途
yield暂停、之后再从上次暂停位置继续执行的函数。
它有两点和普通函数完全不一样：
- 不会立刻执行：调用生成器函数时，不会马上跑代码，而是返回一个"生成器对象"。
- 执行过程可中断 ：在函数内部用
yield抛出一个值的同时，函数会暂停；下次继续从暂停处往后执行。
生成器函数用 function* 定义，最简单的例子长这样：
javascript
function* generator() {
yield 1;
yield 2;
yield 3;
}不管是在 Node.js 还是浏览器中，生成器都已经是非常标准的一部分了。
2. 生成器第一次调用时，到底发生了什么？
重点：调用生成器函数本身，不会执行函数体。
javascript
function* generator() {
yield 1;
yield 2;
yield 3;
}
const gen = generator(); // 这里不会执行函数体这一步返回的 gen 是一个特殊的迭代器对象，只有在你开始"消费"它时，函数体才会真正执行。每一次消费，都通过 next() 完成。
3. 用 next() 消费生成器：一段一段地执行
生成器最常见的使用方式，就是直接调用 next()：
javascript
const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }可以看到：
value：本次yield抛出的值done：生成器是否已经执行完毕false：后面还有东西true：已经结束，再调也是{ value: undefined, done: true }
这里有两个容易忽略的特性：
- 同一个生成器实例（
gen）只能从头到尾走一次。 - 你可以根据自己的节奏，在任何时间点调用 next()，这就是它"可以暂停"的本质。
4. 用 for...of 优雅遍历生成器
手动 next() 有点繁琐，生成器本身就是可迭代对象，所以可以直接用 for...of 来消费:
javascript
const gen = generator();
for (const value of gen) {
console.log(value);
}
// 1
// 2
// 3for...of 会在内部帮你处理 next()，直到 done 为 true 为止。所以你可以把生成器当成一个自定义规则的"数据流"来看待：你决定它一次 yield 出什么、什么时候结束。
5. 生成器能干嘛？几个典型场景
很多人印象里，生成器只和"高级用法""底层库"绑定在一起，但在 Node.js 和浏览器实际开发中，有几个场景非常适合用它：
- 控制复杂的异步流程（早期 co 库那一代玩法）
- 构造自定义迭代器（比如分页数据、树遍历等）
- 处理流式数据（重点：和大模型 /
SSE这种「一小段一小段不断回来」的数据非常契合）
现在有了 async/await 之后，前两类常见程度下降了一些，但在流式场景里，生成器依然非常好用。