JavaScript生成器_协程与异步迭代实现-js教程-PHP中文网

JavaScript生成器_协程与异步迭代实现

幻影之瞳

发布： 2025-11-19 20:20:34

原创

285人浏览过

生成器通过function定义，可暂停和恢复执行，yield实现中断与返回；异步生成器结合async function和for await...of，支持异步数据流处理；在Redux-Saga中用于管理副作用，实现同步语法写异步逻辑；自定义异步迭代器适用于事件流等场景。

javascript生成器_协程与异步迭代实现

JavaScript中的生成器（Generators）和异步迭代是现代异步编程的重要组成部分。它们不仅提供了更清晰的控制流方式，还为协程式编程和处理异步数据流提供了强大支持。

生成器与协程的基本概念

生成器是通过 function* 定义的特殊函数，调用后返回一个可迭代的生成器对象。它可以在执行过程中暂停和恢复，这种能力使其具备了协程（Coroutine）的特性。

使用 yield 关键字可以中断函数执行，并向外返回值；下一次调用 next() 方法时继续从断点处运行。

例如：

function* counter() {
  let i = 0;
  while (true) {
    yield i++;
  }
}
<p>const gen = counter();
gen.next().value; // 0
gen.next().value; // 1
gen.next().value; // 2

登录后复制

这展示了如何手动控制执行节奏，模拟协程行为——在需要时暂停，在外部触发时继续。

立即学习“Java免费学习笔记（深入）”；

异步迭代与 for-await-of

当结合 async/await 和生成器，我们可以创建异步生成器（async generators），它们能按需产生异步结果。

异步生成器使用 async function* 声明，其中的 yield 可以配合 await 处理异步操作。

示例：逐个读取远程资源

async function* fetchUrls(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  }
}

登录后复制

配合 for await...of 循环消费异步生成器：

GAIPPT

AI PPT制作和美化神器

1129

查看详情

(async () => {
  const urls = ['/api/user', '/api/posts', '/api/comments'];
  for await (const data of fetchUrls(urls)) {
    console.log(data);
  }
})();

登录后复制

每次迭代都会自动等待当前 yield 的 Promise 解析完成，实现简洁的异步流处理。

生成器作为协程的实际应用

利用生成器的暂停恢复机制，可以实现任务调度、状态机或中间件流程控制等场景。

比如，在 Redux-Saga 中就使用生成器来管理副作用：

function* fetchDataSaga() {
  try {
    const user = yield call(fetch, '/api/user');
    yield put({ type: 'SET_USER', payload: user });
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">const posts = yield call(fetch, '/api/posts');
yield put({ type: 'SET_POSTS', payload: posts });

登录后复制

} catch (err) { yield put({ type: 'FETCH_ERROR', error: err }); } }

这里的 yield 并不直接处理异步，而是将指令对象交由 saga 中间件解释执行，实现了“看似同步、实为异步”的协程风格编码。

自定义异步可迭代对象

只要对象实现了异步迭代器协议（即拥有返回 `{ value, done }` 形式且 value 为 Promise 的 next() 方法），就可以用于 for await...of。

构建一个定时推送消息的异步迭代器：

const ticker = {
  async *[Symbol.asyncIterator]() {
    let i = 0;
    while (i < 5) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      yield `Tick ${++i}`;
    }
  }
};
<p>(async () => {
for await (const msg of ticker) {
console.log(msg);
}
})();

登录后复制

每秒输出一条信息，共五条。这种方式非常适合处理事件流、实时数据推送等场景。

基本上就这些。生成器提供了一种优雅的方式来编写可暂停的函数，而异步迭代则让处理异步数据流变得更自然。两者结合，使 JavaScript 能够以接近同步的语法处理复杂的异步逻辑，提升了代码可读性和维护性。

以上就是JavaScript生成器_协程与异步迭代实现的详细内容，更多请关注php中文网其它相关文章！