当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript异步迭代器与for-await-of详解

JavaScript异步迭代器与for-await-of详解

2025-11-06 09:24:34 0浏览收藏

本篇文章给大家分享《JavaScript异步迭代器与for-await-of用法解析》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

异步迭代器是返回Promise的next()方法的对象，用于处理异步数据流；通过[Symbol.asyncIterator]实现，配合for await...of在async函数中遍历异步序列，适用于分页请求、流数据处理等场景，代码简洁且内存友好。

JavaScript中的异步迭代器与for-await-of循环

JavaScript中的异步迭代器（Async Iterator）和 for await...of 循环是处理异步数据流的重要工具，特别适用于按需获取异步生成的数据，比如从网络流、文件读取或事件源中逐步获取内容。

异步迭代器是什么？

异步迭代器是一种遵循异步迭代协议的对象，它提供一个 next() 方法，返回一个 Promise，该 Promise 解析为包含 value 和 done 属性的对象。与普通迭代器不同，异步迭代器的 next() 返回的是 Promise，适合在每一步操作都涉及异步任务的场景。

一个异步迭代器的基本结构如下：

{
  next() {
    return Promise.resolve({ value: 值, done: 布尔值 });
  }
}

要让一个对象成为可异步迭代的，还需实现 [Symbol.asyncIterator] 方法，返回一个具有 next() 的对象。

使用 for await...of 遍历异步数据

for await...of 是专门用于遍历异步可迭代对象的语法。它只能在 async 函数内部使用，会自动等待每次迭代的 Promise 解析完成。

例如，定义一个异步生成器函数，逐步返回延迟加载的值：

async function* asyncGenerator() {
  yield await new Promise(resolve => setTimeout(() => resolve('第一项'), 1000));
  yield await new Promise(resolve => setTimeout(() => resolve('第二项'), 1000));
  yield await new Promise(resolve => setTimeout(() => resolve('第三项'), 1000));
}

使用 for await...of 遍历：

(async () => {
  for await (const item of asyncGenerator()) {
    console.log(item);
  }
})();
// 输出：
// 第一项（1秒后）
// 第二项（再1秒后）
// 第三项（再1秒后）

每次循环都会等待当前 Promise 完成，再进入下一次迭代，代码看起来像同步，实际是异步执行。

常见应用场景

异步迭代器非常适合以下情况：

读取大型文件流，逐块处理数据
处理 WebSocket 或 SSE 消息流
分页拉取远程数据（如 API 分页接口）
自定义异步数据源，如传感器读数、日志流等

例如，模拟分页拉取用户数据：

async function* fetchUsers() {
  let page = 1;
  while (true) {
    const response = await fetch(`/api/users?page=${page}`);
    const data = await response.json();
    if (data.length === 0) break;
    for (const user of data) {
      yield user;
    }
    page++;
  }
}
<p>// 使用
(async () => {
for await (const user of fetchUsers()) {
console.log(user.name);
}
})();
</p>

这种方式让数据拉取逻辑清晰，且内存友好，避免一次性加载全部数据。