J*aScript 异步生成器：结合 async 与 yield 处理异步数据

异步生成器是使用 async function* 定义的函数，能通过 yield 逐步产出 await 的异步结果，返回符合异步迭代器协议的对象，可被 for await...of 遍历，适用于分页请求、事件流等场景，结合了异步等待与惰性产出的优势。

异步生成器是 J*aScript 中 async 和 yield 的结合体，能更优雅地处理异步数据流。它允许你在生成器函数中使用 await，同时通过 yield 逐步产出异步结果，特别适合处理分页数据、事件流或文件读取等场景。

什么是异步生成器？

异步生成器函数是使用 async function* 定义的函数，返回一个既符合异步迭代器协议又可被 for await...of 遍历的对象。

与普通生成器不同，异步生成器中的 yield 可以暂停并等待异步操作完成，而函数本身返回一个异步迭代器。

定义方式：

async function* myAsyncGenerator() {
  const data = await fetch('/api/data');
  yield data.json();
}

如何使用异步生成器处理异步任务？

常见用途包括逐页拉取数据、读取流式内容或监听异步事件序列。

例如：模拟分页获取用户列表

网趣网上购物系统HTML静态版

网趣购物系统静态版支持网站一键静态生成，采用动态进度条模式生成静态，生成过程更加清晰明确，商品管理上增加淘宝数据包导入功能，与淘宝数据同步更新!采用领先的AJAX+XML相融技术，速度更快更高效！系统进行了大量的实用性更新，如优化核心算法、增加商品图片批量上传、谷歌地图浏览插入等，静态版独特的生成算法技术使静态生成过程可随意掌控，从而可以大大减轻服务器的负担，结合多种强大的SEO优化方式于一体，使

0 查看详情

async function* fetchUsers(page = 1) {
  while (true) {
    const res = await fetch(`/api/users?page=${page}`);
    const users = await res.json();
<pre class="brush:php;toolbar:false;">if (users.length === 0) break;

yield users;
page++;

} }

遍历异步生成器：

(async () => {
  for await (const users of fetchUsers()) {
    console.log('Got users:', users);
  }
})();

这样每一页数据都会在获取完成后自动 yield，并由 for await...of 按序处理。

异步生成器的优势

• 简化异步流程控制：无需手动管理回调或 Promise 链，逻辑更清晰
• 内存友好：按需生成数据，避免一次性加载大量结果
• 兼容异步迭代协议：可与 for await...of、Promise.all 等机制无缝集成
• 可组合性强：多个异步生成器可以串联、映射或过滤

实际应用场景示例

从 EventSource（服务器发送事件）中持续接收消息：

async function* readEvents(url) {
  const eventSource = new EventSource(url);
<p>for await (const event of eventSource) {
if (event.type === 'message') {
yield JSON.parse(event.data);
}
}
}</p><p>// 使用
(async () => {
for await (const msg of readEvents('/events')) {
console.log('Received:', msg);
}
})();

这种方式让事件流处理变得像遍历数组一样自然。

基本上就这些。异步生成器把“一步步来”和“等一等再继续”很好地融合在一起，适合处理需要延迟产出的异步数据序列。不复杂但容易忽略。

以上就是J*aScript 异步生成器：结合 async 与 yield 处理异步数据的详细内容，更多请关注其它相关文章！