如何用 Array.fromAsync 配合生成器实现流式数据转换

如何用 Array.fromAsync 配合生成器实现流式数据转换

Array.fromAsync 不能直接消费生成器

开发者上手时最容易掉进这个坑：Array.fromAsync 这家伙，它期待的是一位 异步可迭代对象（AsyncIterable）。而我们平时写的普通生成器（用 function* 声明的），其实是 Iterable，属于同步世界里的居民。直接把同步生成器扔给它，毫不意外地就会收到一句 TypeError: input is not async iterable 的抱怨。

所以，第一步永远是得先把它“转正”成异步版本。来看一个典型的错误示范：

async function* numbers() { yield 1; yield 2; }
Array.fromAsync(numbers()); //  这里会报错

正确的思路是什么？很简单，要么你从一开始就用 async function* 来声明一个原生的异步生成器，它自带 AsyncIterable 属性；要么，你就得手动给已有的同步生成器包上一层异步外壳。比如这样：(async function*() { for await (const x of syncGen()) yield x; })()。当然，后者只是做了接口适配，并不会把同步操作凭空变成异步。

流式转换的关键：在 async generator 中做 await + yield

真正实现“流式”处理的核心秘诀，并不在 Array.fromAsync 本身，而在于你的异步生成器内部如何编排 await 和 yield。说白了，就是数据何时“等”、何时“放”。

假设我们正在处理一个分页API的数据，想一边拉取一边转换：

async function* fetchPages() {
  let page = 1;
  while (true) {
    const res = await fetch(`/api/itemspage=${page}`);
    const items = await res.json();
    if (items.length === 0) break;
    for (const item of items) {
      //  这里就是施展拳脚的地方：任何异步转换，比如查库、调接口
      const enriched = await enrichItem(item); // 假设这是个异步函数
      yield enriched; // 处理完一条，立刻就抛出一条，下游可以即时消费
    }
    page++;
  }
}

这时，Array.fromAsync(fetchPages()) 就会忠实地按需工作：拉取一页、处理一条、收集一条，绝不会傻等到所有页面都返回了才开始干活。

• 生成器里每执行一次 yield，Array.fromAsync 就接收并等待（await）一个值。
• 如果 enrichItem 这类转换操作非常消耗CPU，别忘了考虑用 setTimeout(..., 0) 这样的技巧让出事件循环，避免阻塞整体流程。
• 切记，别在 for await 循环外部图省事，一股脑地用 Promise.all 处理批量数据——那可就完全违背流式的初衷了。

性能与内存：Array.fromAsync 不适合超大数据流

必须敲一下黑板：Array.fromAsync 这个名字就揭示了它的最终归宿——“把所有异步迭代出来的值，攒成一个完整的数组”。这意味着它会在内存里不断累积，直到数据源枯竭。

• 试想，如果异步生成器吐出上百万条记录，这个最终数组会吃掉多少内存？
• 在这个过程中，你没办法进行节流、采样，也很难优雅地提前终止（除非粗暴地抛出错误）。
• 它也不像数组原型那样提供 map、filter 等链式方法。想要流式过滤？只能在生成器内部用 if 判断，符合条件的才 yield。

这时候，更灵活轻量的方案往往是直接使用 for await...of 循环：

for await (const item of fetchPages()) {
  console.log(item); // 实时处理，内存零压力
  if (item.id === targetId) break; // 想什么时候停，就什么时候停
}

总而言之，只有当你百分之百确定需要“一次性拿到全部结果的数组”时，Array.fromAsync 才是合适的工具；否则，for await...of 才是处理流式数据的首选。

兼容性与 polyfill 注意点

Array.fromAsync 作为 ES2024 的新提案，目前的原生支持范围还比较有限，主要是在 Chromium 122+ 和 Node.js 20.12+ 这些较新的环境中。动手之前，务必先看看环境：

• 在浏览器里，可以用 typeof Array.fromAsync === 'function' 来检测。
• 如果环境不支持，可以考虑使用 iter-tools 库提供的 toArrayAsync 函数作为替代，其行为基本一致。
• 要警惕一种错误的模拟方案：用 Array.from 结合 Promise.all。它会尝试并发获取所有数据，不仅破坏了流式的顺序性，也打乱了可能的节流逻辑，千万要避免。

最后提一句，异步生成器（async function*）本身的支持其实已经很广泛了（Node.js 10+, Chrome 63+）。所以，流式处理的逻辑完全可以独立部署和运行，只是最后用 Array.fromAsync 收集结果时，需要为兼容性多留个心眼。