JavaScript class 中怎么在类方法中使用生成器函数处理异步流-js教程-PHP中文网

javascript class 中不可用 async function，但可通过普通生成器 yield promise 或定义 async 方法返回 asynciterator 来实现异步流；消费时须用 for await...of。

javascript class 中怎么在类方法中使用生成器函数处理异步流

在 JavaScript class 中，不能直接用 async function*（因为语法不合法），但可以通过将生成器函数作为普通方法定义，再配合 async 方法或外部异步逻辑来消费它，从而实现对异步流的可控迭代。关键在于：生成器本身不处理异步，但它可以产出 Promise 或异步可迭代对象（如 AsyncIterator），真正的“等待”由调用方（比如 for await...of）完成。

1. 类中定义普通生成器方法，产出 Promise

生成器函数（function*）不能是 async，但可以 yield Promise 实例。这适合封装“按需触发”的异步操作序列，比如分页请求、轮询、或逐步加载数据。

示例：

class DataStream {
  constructor(urls) {
    this.urls = urls;
  }
<p>// 普通生成器：每次 yield 一个 Promise
*fetchTasks() {
for (const url of this.urls) {
yield fetch(url).then(res => res.json());
}
}</p><p>// 辅助方法：支持 async 迭代（返回 AsyncIterator）
async *fetchTasksAsync() {
for (const url of this.urls) {
yield await fetch(url).then(res => res.json());
}
}
}</p>

2. 在类方法中消费生成器（推荐用 `async *()` 返回异步迭代器）

更现代、更符合“异步流”语义的方式是：在类中定义一个 async * 方法，它本身返回 AsyncIterator，内部可 await 并 yield 值。这个方法可被 for await...of 直接使用。

说明：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

async * 是合法语法，返回的是异步迭代器（AsyncIterator），不是生成器对象（Generator）
它能 await 异步操作，并 yield 解析后的值，天然适配流式消费
适合模拟持续数据流（如 SSE、WebSocket 消息、定时拉取等）

示例：

class EventStream {
  constructor(source) {
    this.source = source; // 可以是 EventSource、WebSocket 等
  }
<p>// ✅ 正确：async generator 方法，返回 AsyncIterator
async *listen() {
for await (const event of this.source) {
yield { timestamp: Date.now(), data: event };
}
}</p><p>// 或模拟分页流
async <em>paginate(maxPages = 5) {
let page = 1;
while (page /api/items?page=${page});
const items = await res.json();
yield</em> items; // 委托给数组的默认迭代器
page++;
}
}
}</p>

3. 外部使用：用 `for await...of` 消费异步流

类实例的方法返回异步迭代器后，在外部（或另一个 async 方法中）用 for await 安全遍历，自动处理每个 yield 的异步步骤。

示例：

const stream = new EventStream(myEventSource);
<p>// 在 async 函数中使用
async function run() {
for await (const item of stream.listen()) {
console.log(item);
}
}</p><p>// 或消费分页流
async function loadAll() {
const loader = new EventStream(null);
loader.paginate = function<em> () { /</em> 上面定义的 paginate <em>/ }.bind(loader); // 注意：上面 paginate 已是 async</em></p><p>// ✅ 正确调用
for await (const item of loader.paginate(3)) {
console.log('Got:', item);
}
}</p>

4. 注意事项与常见误区

避免以下写法：

async function* foo() {} ❌ 语法错误 —— async 和 * 不能同时修饰同一函数声明（但 async * 是合法整体关键字）
在普通生成器里 await（会报错）：生成器函数体内不能 await，除非它是 async *
把 yield fetch(...) 当作已解析结果 —— 它只产出 Promise，需在消费端 await 或用 Promise.all([...]) 批量处理