JavaScript Array.fromAsync()-Methode

Array 对象参考手册JavaScript Array-Objekt

Beispiel

Ein Array aus einem Async-Iterable erstellen:

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]

Selbst ausprobieren »

Definition und Verwendung

Array.fromAsync() ist eine relativ neue statische Methode in JavaScript, mit der du ein neues Array aus einem asynchronen Iterable, einem Iterable oder einem array-ähnlichen Objekt erstellen kannst. Diese Methode gibt ein Promise zurück, das zu einer neuen Array-Instanz aufgelöst wird.

Einfach ausgedrückt ist es die asynchrone Version von Array.from(), die speziell für die Verarbeitung asynchroner Datenquellen entwickelt wurde.

Grundlegende Syntax

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

Parameterbeschreibung

  • asyncIterable: Ein asynchrones Iterable (wie ein asynchroner Generator)
  • iterable: Ein Iterable (wie ein Array, String, Set usw.)
  • arrayLike: Ein array-ähnliches Objekt (ein Objekt mit einer length-Eigenschaft und indizierten Elementen)
  • mapFn(Optional): Eine Mapping-Funktion, die für jedes Element aufgerufen wird
  • thisArg(Optional): Der Wert, der als this beim Ausführen von mapFn verwendet werden soll

Rückgabewert

Gibt ein Promise zurück, das zu einem neuen Array aufgelöst wird.

Browser-Unterstützung

Array.fromAsync() ist eine relativ neue Funktion, die Stand 2023 nur in neueren Browserversionen unterstützt wird:

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

Für nicht unterstützte Umgebungen können Sie ein Polyfill verwenden oder eine ähnliche Funktionalität selbst implementieren.

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Methode unterstützt.

Methode
fromAsync() 117+ 121+ 115+ 16.4+ 81.0+

Anwendungsbeispiele

Beispiel 1: Ein Array aus einem Async-Generator erstellen

Beispiel

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

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

Beispiel 2: Ein Array aus einem regulären Iterable erstellen

Beispiel

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

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

Beispiel 3: Verwendung einer Mapping-Funktion

Beispiel

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

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

Unterschiede zu Array.from()

Obwohl Array.fromAsync() und Array.from() ähnlich aussehen, gibt es mehrere wichtige Unterschiede:

1. Umgang mit asynchronen Datenquellen

Array.fromAsync() kann asynchrone Iterables verarbeiten, während Array.from() dies nicht kann.

2. Rückgabewert

Array.from() gibt direkt ein Array zurück, während Array.fromAsync() ein Promise zurückgibt.

3. Ausführungszeitpunkt

Array.from() wird synchron ausgeführt, während Array.fromAsync() asynchron ausgeführt wird.

Praktische Anwendungsszenarien

Szenario 1: Umgang mit paginierten API-Daten

Beispiel

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); // Daten von allen Seiten in einem Array zusammenführen
})();

Szenario 2: Umgang mit den Ergebnissen mehrerer asynchroner Operationen

Beispiel

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

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

Zusammenfassung

Array.fromAsync() ist ein leistungsstarkes Werkzeug, besonders geeignet für die Verarbeitung asynchroner Datensammlungen. Es vereinfacht den Prozess der Erstellung von Arrays aus asynchronen Datenquellen und macht den Code sauberer und einfacher zu warten. Obwohl die Browserunterstützung noch nicht weit verbreitet ist, wird es mit der Zeit zu einer der Standardmethoden für die Verarbeitung asynchroner Datensammlungen.

Denken Sie daran: Wenn Sie ein Array aus einer asynchronen Datenquelle erstellen müssen, ist Array.fromAsync() Ihr guter Helfer!

Array 对象参考手册JavaScript Array-Objekt

Andere Erweiterungen