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

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

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

什么是异步可迭代对象？

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

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

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

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

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

示例片段：

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);，但会等到全部完成