JavaScript Array.fromAsync() 方法

Array 对象参考手册 JavaScript Array 对象

实例

从异步可迭代对象创建数组：

const asyncIterable = (async function* () { for (let i = 0; i < 5; i++) { await new Promise((resolve) => setTimeout(resolve, 10 * i)); yield i; } })(); Array.fromAsync(asyncIterable).then((array) => console.log(array)); // [0, 1, 2, 3, 4]

尝试一下 »

定义和用法

Array.fromAsync() 是 JavaScript 中一个相对较新的静态方法，它允许你从异步可迭代对象、可迭代对象或类数组对象创建一个新的数组。这个方法会返回一个 Promise，该 Promise 会解析为一个新的数组实例。

简单来说，它是 Array.from() 的异步版本，专门用于处理异步数据源。

基本语法

Array.fromAsync(asyncIterable)
Array.fromAsync(iterable)
Array.fromAsync(arrayLike)
Array.fromAsync(asyncIterable, mapFn)
Array.fromAsync(asyncIterable, mapFn, thisArg)

参数说明

  • asyncIterable: 一个异步可迭代对象（如异步生成器）
  • iterable: 一个可迭代对象（如数组、字符串、Set 等）
  • arrayLike: 一个类数组对象（具有 length 属性和索引元素的对象）
  • mapFn (可选): 一个映射函数，会对每个元素调用
  • thisArg (可选): 执行 mapFn 时用作 this 的值

返回值

返回一个 Promise，该 Promise 会解析为一个新的数组。

浏览器支持

Array.fromAsync() 是一个相对较新的特性，目前（截至 2023 年）仅在较新版本的浏览器中支持：

  • Chrome 117+
  • Firefox 115+
  • Safari 16.4+
  • Node.js 21+

对于不支持的环境，你可以使用 polyfill 或自行实现类似功能。

表格中的数字表示支持该方法的第一个浏览器版本号。

方法
fromAsync() 117+ 121+ 115+ 16.4+ 81.0+

使用示例

示例 1: 从异步生成器创建数组

实例

async function* asyncGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

(async () => {
  const result = await Array.fromAsync(asyncGenerator());
  console.log(result); // 输出: [1, 2, 3]
})();

示例 2: 从普通可迭代对象创建数组

实例

const set = new Set([1, 2, 3]);

(async () => {
  const result = await Array.fromAsync(set);
  console.log(result); // 输出: [1, 2, 3]
})();

示例 3: 使用映射函数

实例

async function* asyncNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

(async () => {
  const result = await Array.fromAsync(asyncNumbers(), x => x * 2);
  console.log(result); // 输出: [2, 4, 6]
})();

与 Array.from() 的区别

虽然 Array.fromAsync() 和 Array.from() 看起来很相似，但它们有几个关键区别：

1. 处理异步数据源

Array.fromAsync() 可以处理异步可迭代对象，而 Array.from() 不能。

2. 返回值

Array.from() 直接返回数组，而 Array.fromAsync() 返回一个 Promise。

3. 执行时机

Array.from() 是同步执行的，而 Array.fromAsync() 是异步执行的。

实际应用场景

场景 1: 处理分页 API 数据

实例

async function* paginatedFetcher() {
  let page = 1;
  while (true) {
    const response = await fetch(`https://api.example.com/data?page=${page}`);
    const data = await response.json();
    if (data.length === 0) break;
    yield* data;
    page++;
  }
}

(async () => {
  const allData = await Array.fromAsync(paginatedFetcher());
  console.log(allData); // 所有页面的数据合并为一个数组
})();

场景 2: 处理多个异步操作的结果

实例

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3)
];

(async () => {
  const results = await Array.fromAsync(promises);
  console.log(results); // 输出: [1, 2, 3]
})();

总结

Array.fromAsync() 是一个强大的工具，特别适合处理异步数据集合。它简化了从异步数据源创建数组的过程，使代码更加清晰和易于维护。虽然目前浏览器支持还不够广泛，但随着时间推移，它将成为处理异步数据集合的标准方法之一。

记住，当你需要从异步数据源创建数组时，Array.fromAsync() 是你的好帮手！

Array 对象参考手册 JavaScript Array 对象