如何理解JavaScript异步迭代_如何遍历异步数据源-js教程-PHP中文网

如何理解JavaScript异步迭代_如何遍历异步数据源

夢幻星辰

发布： 2025-12-23 18:55:02

原创

678人浏览过

JavaScript异步迭代的核心是async iterators与for await...of，用于安全遍历流、游标、分页API等边取边等待的数据源；异步可迭代对象需实现[Symbol.asyncIterator]()并返回含Promise型next()方法的对象。

如何理解javascript异步迭代_如何遍历异步数据源

JavaScript异步迭代的核心是用 async iterators 和 for await...of 语法，安全、简洁地遍历那些“边取数据边等待”的来源，比如流（ReadableStream）、数据库游标、分页API响应等。

什么是异步可迭代对象？

一个对象只要实现了 [Symbol.asyncIterator]() 方法，并返回一个符合异步迭代器协议的对象（即有返回 Promise 的 next() 方法），它就是异步可迭代的。

和同步迭代器不同，它的 next() 不直接返回 { value, done }，而是返回 Promise。这意味着每次取值都可能需要等待（如网络请求、文件读取）。

如何写一个简单的异步迭代器？

比如模拟按页拉取用户列表：

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

定义一个函数，返回带 [Symbol.asyncIterator] 的对象
next() 内部用 fetch 或其他异步操作获取下一页
当没有更多数据时，返回 { value: undefined, done: true }

示例片段：

创客贴设计

创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！

213

查看详情

async function* fetchUsersPages() {
  let page = 1;
  while (true) {
    const res = await fetch(`/api/users?page=${page}`);
    const users = await res.json();
    if (users.length === 0) break;
    for (const user of users) yield user;
    page++;
  }
}

登录后复制

怎么遍历它？用 for await...of

这是专为异步迭代器设计的语法，会自动等待每次 next() 的 Promise 解析：

不能用普通 for...of，会报错或只得到 Promise 对象
不能用 Array.from() 或展开运算符 [...iter]，它们只认同步迭代器
for await...of 内部会调用 next() 并 await 其结果，直到 done: true

使用方式：

for await (const user of fetchUsersPages()) {
  console.log(user.name); // 每次都是解析后的实际值
}

登录后复制

常见异步数据源与注意事项

原生支持异步迭代的场景包括：

ReadableStream（如 response.body）—— 可逐块读取响应体
某些数据库驱动（如 @prisma/client 的 findMany({ cursor }) 流式查询）
自定义封装的分页/流式 SDK

注意点：

错误需在 for await 块内用 try/catch 捕获，否则会中断整个遍历
无法像数组那样随机访问或多次遍历——异步迭代器通常是一次性的
想转成数组？可用 const arr = []; for await (const x of iter) arr.push(x);，但会等到全部完成

以上就是如何理解JavaScript异步迭代_如何遍历异步数据源的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

javascript怎样进行错误处理_trycatch和Promise错误如何捕获什么是javascriptBigInt_它如何表示大整数？ javascript如何操作摄像头_怎样通过WebRTC实现视频通话 JavaScript some和every有何区别_它们返回什么？ javascript的XMLHttpRequest是什么_它与Fetch有何区别？