JavaScript迭代器_生成器异步应用-js教程-PHP中文网

JavaScript迭代器_生成器异步应用

紅蓮之龍

发布： 2025-11-28 20:29:02

原创

574人浏览过

迭代器与生成器可通过yield暂停执行，结合Promise实现异步控制。示例中，生成器函数yield出Promise，由外部处理并回传结果，从而实现清晰的异步流程。通过自定义run函数可自动执行该过程，原理类似co库，虽async/await已成主流，但生成器在复杂控制流与任务调度中仍有价值，有助于理解异步机制演化与底层逻辑。

javascript迭代器_生成器异步应用

JavaScript中的迭代器和生成器不只是用来处理数据序列的工具，它们在异步编程中也有强大应用。通过结合yield和Promise，我们可以写出更清晰、可控的异步逻辑。

迭代器与生成器基础回顾

迭代器是一个对象，包含一个next()方法，返回{ value, done }结构。生成器函数用function*定义，调用后返回一个迭代器。

生成器的特点是能通过yield暂停执行，直到下一次next()被调用。

示例：

function* simpleGen() {
  yield 1;
  yield 2;
  return 3;
}
const it = simpleGen();
it.next(); // { value: 1, done: false }
it.next(); // { value: 2, done: false }
it.next(); // { value: 3, done: true }

登录后复制

生成器实现异步控制

虽然现在普遍使用async/await，但在早期，生成器常用于模拟异步流程。原理是：生成器yield一个Promise，外部迭代器获取该Promise并等待其完成，再将结果送回生成器继续执行。

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

这种模式被称为“yielding promises”。

千博企业网站系统全功能个人版SQL2011 Build 0903

2010.09.03更新优化前台内核处理代码；优化后台内核、静态生成相关代码，生成速度全面提升；修改前台静态模板中所有已知错误；修正后台相关模块所有已知错误；更换后台编辑器，功能更强大；增加系统说明书。免费下载、免费使用、完全无限制。完全免费拥有：应广大用户要求，千博网络全面超值发布企业网站系统个人版程序包：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。全站模块化操作，静态

查看详情

手动执行示例：

function* asyncGen() {
  const data = yield fetch('/api/data');
  console.log(data);
}
<p>const it = asyncGen();
const promise = it.next().value; // 获取fetch Promise
promise.then(res => res.json())
.then(data => it.next(data)); // 将结果送回

登录后复制

自动运行异步生成器（自定义runner）

可以封装一个通用函数来自动处理生成器中的Promise，类似co库的原理。

实现一个简单的run函数：

function run(genFunc) {
  const gen = genFunc();
<p>function next(val) {
const result = gen.next(val);
if (result.done) return Promise.resolve(result.value);</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">return Promise.resolve(result.value)
  .then(data => next(data));

登录后复制

}

return next(); }

使用方式：

run(function* () {
  const resp = yield fetch('/user');
  const user = yield resp.json();
  const postsResp = yield fetch(`/posts?uid=${user.id}`);
  const posts = yield postsResp.json();
  console.log(posts);
});

登录后复制