Método JavaScript Array.fromAsync()

Array 对象参考手册Objeto JavaScript Array

Ejemplo

Crear un array desde un objeto asíncrono iterable:

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]

Pruébalo »

Definición y uso

Array.fromAsync() es un método estático relativamente nuevo en JavaScript que te permite crear un nuevo array a partir de un objeto asíncrono iterable, un objeto iterable o un objeto similar a un array. Este método devuelve una Promise que se resuelve en una nueva instancia de array.

En términos simples, es la versión asíncrona de Array.from(), diseñada específicamente para manejar fuentes de datos asíncronas.

Sintaxis básica

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

Descripción de parámetros

  • asyncIterable: un objeto asíncrono iterable (como un generador asíncrono)
  • iterable: un objeto iterable (como un array, cadena, Set, etc.)
  • arrayLike: un objeto similar a un array (un objeto con propiedad length y elementos indexados)
  • mapFn(opcional): una función de mapeo que se llama para cada elemento
  • thisArg(opcional): un valor que se usa como this al ejecutar mapFn

Valor de retorno

Devuelve una Promise que se resuelve en un nuevo array.

Soporte del navegador

Array.fromAsync() es una característica relativamente nueva; actualmente (hasta 2023) solo se admite en versiones más recientes de navegadores:

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

Para entornos que no lo admiten, puedes usar un polyfill o implementar una funcionalidad similar por tu cuenta.

Los números en la tabla indican la primera versión del navegador que admite este método.

Método
fromAsync() 117+ 121+ 115+ 16.4+ 81.0+

Ejemplos de uso

Ejemplo 1: Crear un array desde un generador asíncrono

Ejemplo

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

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

Ejemplo 2: Crear un array desde un objeto iterable normal

Ejemplo

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

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

Ejemplo 3: Usar una función de mapeo

Ejemplo

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

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

Diferencias con Array.from()

Aunque Array.fromAsync() y Array.from() parecen similares, tienen varias diferencias clave:

1. Manejo de fuentes de datos asíncronas

Array.fromAsync() puede manejar objetos asíncronos iterables, mientras que Array.from() no puede.

2. Valor de retorno

Array.from() devuelve un array directamente, mientras que Array.fromAsync() devuelve una Promise.

3. Momento de ejecución

Array.from() se ejecuta de forma síncrona, mientras que Array.fromAsync() se ejecuta de forma asíncrona.

Casos de uso práctico

Escenario 1: Manejo de datos de API paginados

Ejemplo

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); // Los datos de todas las páginas se combinan en un solo array
})();

Escenario 2: Manejo de resultados de múltiples operaciones asíncronas

Ejemplo

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

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

Resumen

Array.fromAsync() es una herramienta poderosa, especialmente adecuada para manejar colecciones de datos asíncronos. Simplifica el proceso de crear arrays desde fuentes de datos asíncronas, haciendo que el código sea más claro y fácil de mantener. Aunque el soporte de los navegadores aún no está muy extendido, con el tiempo se convertirá en uno de los métodos estándar para manejar colecciones de datos asíncronas.

¡Recuerda, cuando necesites crear un array desde una fuente de datos asíncrona, Array.fromAsync() es un gran aliado!

Array 对象参考手册Objeto JavaScript Array

Otras extensiones