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

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

夜晨

发布： 2025-11-21 21:41:02

原创

202人浏览过

迭代器与生成器结合Promise可实现异步流程控制，通过yield暂停函数并逐步执行异步任务，配合执行器自动处理Promise返回值，适用于懒加载和复杂流程控制，是async/await的底层原理。

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

JavaScript 中的迭代器和生成器函数为处理异步操作提供了强大而优雅的方式。通过结合 生成器函数 与 Promise，我们可以写出更清晰、可读性更强的异步代码，尤其适合需要逐步执行或懒加载数据的场景。

迭代器与生成器基础

在深入异步应用前，先理解基本概念：

• 迭代器（Iterator）是一个对象，包含 next() 方法，返回 { value, done } 结构。
• 生成器函数用 function* 定义，调用后返回一个迭代器。
• 使用 yield 可以暂停函数执行，并返回中间值。

例如：

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

登录后复制

生成器 + Promise 实现异步控制

生成器可以配合 Promise 手动控制异步流程。虽然现在普遍使用 async/await，但理解这种模式有助于掌握 JavaScript 异步机制的本质。

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

手动执行一个包含 Promise 的生成器：

function* asyncGen() {
  const user = yield fetch('/api/user');
  const posts = yield fetch(`/api/posts?uid=${user.id}`);
  return { user, posts };
}

登录后复制

要运行它，需编写一个执行器自动处理 yield 出来的 Promise：

function run(generator) {
  const iterator = generator();
<p>function handle(result) {
if (result.done) return result.value;</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">result.value.then(res => res.json())
            .then(data => handle(iterator.next(data)));

登录后复制

}

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

查看详情

handle(iterator.next()); }

// 使用 run(asyncGen);

这个模式正是早期 co 库和 async/await 的实现原理。

惰性异步数据流处理

生成器适合处理大量或无限的数据流，尤其是远程分页数据。我们可以按需拉取下一页，实现“懒加载”。

function* fetchPages(url) {
  let currentUrl = url;
  while (currentUrl) {
    const response = yield fetch(currentUrl).then(r => r.json());
    yield response.data;
    currentUrl = response.nextPage;
  }
}

登录后复制

使用时逐页获取：

const pageIterator = fetchPages('/api/items');
<p>pageIterator.next().then(({ value }) => {
console.log('第一页:', value);
});</p><p>pageIterator.next().then(({ value }) => {
console.log('第二页:', value);
});

登录后复制

这种方式避免一次性加载所有数据，提升性能和内存效率。

与 async/await 的关系

async/await 本质上是生成器 + Promise 自动执行的语法糖。下面两个写法功能等价：

// 使用 async/await
async function getData() {
  const a = await fetchA();
  const b = await fetchB(a);
  return b;
}
<p>// 使用生成器 + 执行器
function* genGet() {
const a = yield fetchA();
const b = yield fetchB(a);
return b;
}</p><p>run(genGet); // 需要自定义 run 函数

登录后复制

虽然 async/await 更简洁，但在某些复杂流程控制（如状态机、任务调度）中，生成器仍具优势。

基本上就这些。掌握生成器在异步中的应用，能让你更深入理解 JavaScript 的协程机制和异步编程演进路径。不复杂但容易忽略。

以上就是JavaScript迭代器_生成器函数异步应用的详细内容，更多请关注php中文网其它相关文章！