JavaScript Academy · 课时

异步迭代器——for await...of 与异步生成器

使用异步生成器和 for await...of 消费随时间到达的值。学习 Symbol.asyncIterator 和简单的异步数据处理流程

第 3 / 3 课8 个步骤

异步迭代器——for await...of 与异步生成器 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 3 节课。

为什么需要异步迭代

目标：消费可能稍后才到达的值。

for await...of 循环遍历异步可迭代对象
async function* 创建异步生成器
Symbol.asyncIterator 将对象标记为异步可迭代对象
微型异步映射示例

async function* 与 for await...of

异步生成器（async function*）会产出供 for await...of 消费的值。

// Use an async generator to yield values (could be delayed in real apps)
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      // In real code you could await a delay or I/O here
      yield i;
    }
  }

  for await (const x of countAsync(3)) {
    console.log("async value:", x);
  }
})();

手动调用异步 next()

异步迭代器上的 next() 会返回一个Promise，解析结果为 { value, done }。

// Drive an async iterator manually with await it.next()
(async function () {
  async function* two() {
    yield "A";
    yield "B";
  }
  const it = two();
  console.log(await it.next()); // { value: "A", done: false }
  console.log(await it.next()); // { value: "B", done: false }
  console.log(await it.next()); // { value: undefined, done: true }
})();

对象上的 Symbol.asyncIterator

添加 [Symbol.asyncIterator]()，使其返回异步迭代器，就能让对象与 for await...of 配合使用。

// Mark a plain object as async-iterable via Symbol.asyncIterator
(async function () {
  const AsyncTwice = {
    from: function (a, b) {
      return {
        a: a, b: b,
        [Symbol.asyncIterator]: async function () {
          let step = 0;
          return {
            next: async function () {
              if (step === 0) { step = 1; return { value: a, done: false }; }
              if (step === 1) { step = 2; return { value: b, done: false }; }
              return { value: undefined, done: true };
            }
          };
        }
      };
    }
  };

  for await (const v of AsyncTwice.from("X", "Y")) {
    console.log("from object:", v);
  }
})();

异步映射管道

组合异步生成器，构建会等待每一步的小型管道。

// Async map: transform values lazily while awaiting work
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      yield i;
    }
  }

  async function* asyncMap(iterable, fn) {
    for await (const v of iterable) {
      // fn can be async; await its result
      const out = await fn(v);
      yield out;
    }
  }

  const doubled = asyncMap(countAsync(4), async function (x) {
    // simulate async transform (no real delay for demo)
    return x * 2;
  });

  const collected = [];
  for await (const v of doubled) {
    collected.push(v);
  }
  console.log("doubled async:", collected);
})();

良好习惯

提示：

for await...of 需要异步可迭代对象（Symbol.asyncIterator）。
使用 async function* 可以轻松定义异步生成器。
每个 next() 都会被等待；请保持工作量较小，以便应用保持响应。

异步可迭代对象基础测验

快速检查：异步可迭代对象的要求。

在交互式课程中回答

回顾

回顾：使用 async function* 和 yield 创建异步生成器。使用 for await...of 循环，或手动等待 next()。借助辅助生成器构建微型异步管道。

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 59
课程: 200

免费开始学习查看完整课程

常见问题解答

「异步迭代器——for await...of 与异步生成器」课时是免费的吗？

是的 — 「异步迭代器——for await...of 与异步生成器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「异步迭代器——for await...of 与异步生成器」这节课中我会学到什么？

使用异步生成器和 for await...of 消费随时间到达的值。学习 Symbol.asyncIterator 和简单的异步数据处理流程你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 3 节。

「异步迭代器——for await...of 与异步生成器」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

可迭代协议与 for...of
生成器函数、yield 与小型数据处理流程
异步迭代器——for await...of 与异步生成器

← 返回 JavaScript Academy