JavaScript 异步任务怎么用 for await 遍历-js教程-PHP中文网

for await...of 用于遍历异步可迭代对象，自动串行等待每个 promise 解析；普通 promise 数组需包装成 async iterable 才能使用，不可直接遍历；适用 asyncgenerator、readablestream 等原生支持 symbol.asynciterator 的对象。

javascript 异步任务怎么用 for await 遍历

for await...of 用于遍历异步可迭代对象（如 AsyncIterator），比如 Promise 数组、fetch 响应流、或自定义的异步生成器。它会自动等待每个 Promise 解析后再进入下一次循环，比手动用 for + await 更简洁安全。

适用场景：必须是异步可迭代对象

不是所有数组或类数组都能直接 for await。普通 Promise 数组（[Promise, Promise]）本身不可迭代，需包装成 async iterable 才能用 for await。

✅ 可用：AsyncGenerator 函数返回值、ReadableStream、某些库的 async 迭代器（如 Node.js 的 fs.promises.readdir() 配合 { encoding: 'buffer' } 返回异步迭代器）
❌ 不可用：直接写 for await (const p of [fetch('/a'), fetch('/b')]) 会报错 —— 普通数组没有 [Symbol.asyncIterator]

正确用法一：配合 AsyncGenerator

自己定义一个异步生成器，按需 yield Promise 结果：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

async function* fetchUrls(urls) {
  for (const url of urls) {
    yield fetch(url).then(r => r.json());
  }
}
<p>// 使用
for await (const data of fetchUrls(['/api/a', '/api/b'])) {
console.log(data); // 自动等待上一个完成再请求下一个（串行）
}</p>

正确用法二：把 Promise 数组转为异步可迭代对象

如果就想顺序执行一组 Promise，可以用工具函数包装：

function toAsyncIterable(promises) {
  return {
    [Symbol.asyncIterator]() {
      let i = 0;
      return {
        next() {
          if (i  ({ value: v, done: false }));
          }
          return Promise.resolve({ value: undefined, done: true });
        }
      };
    }
  };
}
<p>// 使用
const promises = [fetch('/a').then(r => r.text()), fetch('/b').then(r => r.text())];
for await (const text of toAsyncIterable(promises)) {
console.log(text);
}</p>