在JavaScript开发中，我们经常需要在类里面封装一些能够逐步返回异步结果的逻辑，比如从服务器分页拉取数据或者消费消息流。异步生成器函数恰好能把异步操作和迭代器结合起来，作为类成员使用时写法直观且易于维护。
什么是类中的异步生成器函数
异步生成器函数使用 async 和 function* 组合定义，当它作为类的方法出现时，就成为了类成员中的异步生成器函数。调用该方法不会立即执行函数体，而是返回一个符合异步迭代协议的对象，也就是拥有 Symbol.asyncIterator 方法的对象。
基本语法结构
在类内部，只需要在方法名前加上 async * 即可：
class DataLoader {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
// 类成员中的异步生成器函数
async *fetchPages(total) {
for (let page = 1; page <= total; page++) {
// 模拟异步请求
const res = await fetch(this.baseUrl + '?page=' + page);
const data = await res.json();
yield data;
}
}
}
如何消费类中的异步生成器
因为返回的是异步可迭代对象，所以必须使用 for await...of 来遍历，而不能用普通的 for...of。
async function main() {
const loader = new DataLoader('https://api.ipipp.com/items');
for await (const pageData of loader.fetchPages(3)) {
console.log('收到一页数据:', pageData);
}
}
main();
与 Symbol.asyncIterator 的关系
异步生成器函数返回的对象内部自带 Symbol.asyncIterator 方法，因此可以被语言层面的异步循环直接识别。如果手动实现等效逻辑，代码会繁琐很多。
| 方式 | 代码量 | 可读性 |
|---|---|---|
| 异步生成器函数 | 少 | 高 |
| 手动实现异步迭代器 | 多 | 低 |
实际应用指南
场景一：分页接口顺序拉取
上面 DataLoader 的例子就是典型的分页场景，调用方无需关心页码管理，只要不断 await 下一个结果。
场景二：事件流监听
可以把事件封装成异步生成器，在类内部监听后通过 yield 吐出：
class EventStream {
constructor(target) {
this.target = target;
}
async *subscribe(eventName) {
const queue = [];
const handler = (e) => queue.push(e);
this.target.addEventListener(eventName, handler);
try {
while (true) {
if (queue.length > 0) {
yield queue.shift();
} else {
await new Promise(r => setTimeout(r, 50));
}
}
} finally {
this.target.removeEventListener(eventName, handler);
}
}
}
注意事项
- 异步生成器函数内可以使用
await和yield，但不能使用yield*去代理非异步生成器而不加处理。 - 如果循环中途退出，生成器内部的
finally块仍会执行，适合做资源清理。 - 浏览器和Node.js均原生支持，无需额外 polyfill 即可在现代运行环境使用。
合理地把异步生成器函数写成类成员，可以让流式异步逻辑收敛在对象内部，对外暴露简洁的异步迭代接口。
小结
在JavaScript类里定义异步生成器函数，核心就是使用 async * 方法语法，并借助 for await...of 消费。它在分页加载、消息订阅、流式读取等场景中都非常实用，能显著减少嵌套回调，使代码更贴近自然语言描述。
JavaScript异步生成器类成员Symbol_asyncIteratorasync_iteration修改时间：2026-07-25 03:36:10