JavaScript 异步生成器:结合 async 与 yield 处理异步数据

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

JavaScript 异步生成器:结合 async 与 yield 处理异步数据

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

什么是异步生成器?

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

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

定义方式:

立即学习Java免费学习笔记(深入)”;

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

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

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

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

JavaScript 异步生成器:结合 async 与 yield 处理异步数据

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

JavaScript 异步生成器:结合 async 与 yield 处理异步数据 57

查看详情 JavaScript 异步生成器:结合 async 与 yield 处理异步数据

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;"><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); } })(); 

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

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

上一篇
下一篇
text=ZqhQzanResources