Array.fromAsync()

Syntax

Array.fromAsync(items)
Array.fromAsync(items, mapFn)
Array.fromAsync(items, mapFn, thisArg)

Parameter

items

Ein asynchrones iterierbares, iterierbares oder array-hnliches Objekt, das in ein Array konvertiert werden soll.

mapFn Optional

Eine Funktion, die fr jedes Element des Arrays aufgerufen wird. Wenn bereitgestellt, wird jeder Wert, der dem Array hinzugefgt werden soll, zuerst durch diese Funktion geleitet, und der Rckgabewert von mapFn wird stattdessen dem Array hinzugefgt (nachdem er abgewartet wurde). Die Funktion wird mit den folgenden Argumenten aufgerufen:

element

Das aktuelle Element, das im Array verarbeitet wird. Wenn items ein synchrones iterierbares oder array-hnliches Objekt ist, werden alle Elemente zuerst abgewartet, und element wird niemals ein thenable sein. Wenn items ein asynchrones iterierbares Objekt ist, wird jeder erzeugte Wert unverndert bergeben.

index

Der Index des aktuellen Elements, das im Array verarbeitet wird.

thisArg Optional

Wert, der als this beim Ausfhren von mapFn verwendet wird.

Rckgabewert

Ein neues Promise, dessen Erfllungswert eine neue Array-Instanz ist.

Beschreibung

Array.fromAsync() ermglicht das Erstellen von Arrays aus:

• asynchronen iterierbaren Objekten (Objekten wie ReadableStream und AsyncGenerator); oder, wenn das Objekt nicht asynchron iterierbar ist,
• iterierbaren Objekten (Objekten wie Map und Set); oder, wenn das Objekt nicht iterierbar ist,
• array-hnlichen Objekten (Objekten mit einer length-Eigenschaft und indizierten Elementen).

Array.fromAsync() durchluft das asynchrone Iterierbare auf eine Weise, die sehr hnlich zu for await...of ist. Array.fromAsync(items) ist im Allgemeinen quivalent zu folgendem Code, wenn items ein asynchrones oder synchrones Iterierbares ist:

const result = [];
for await (const element of items) {
  result.push(element);
}

Array.fromAsync() ist in Bezug auf das Verhalten fast gleichwertig zu Array.from(), auer in folgenden Punkten:

• Array.fromAsync() verarbeitet asynchrone iterierbare Objekte.
• Array.fromAsync() gibt ein Promise zurck, das sich in die Array-Instanz erfllt.
• Wenn Array.fromAsync() mit einem nicht-asynchronen iterierbaren Objekt aufgerufen wird, wird jedes Element, das dem Array hinzugefgt werden soll, zuerst abgewartet.
• Wenn ein mapFn bereitgestellt wird, wird dessen Ausgabe intern ebenfalls abgewartet.

Array.fromAsync() und Promise.all() knnen beide ein iterierbares Objekt von Versprechen in ein Versprechen eines Arrays umwandeln. Es gibt jedoch zwei Hauptunterschiede:

• Array.fromAsync() wartet jeden Wert ab, der aus dem Objekt sequentiell erzeugt wird. Promise.all() wartet alle Werte gleichzeitig ab.
• Array.fromAsync() iteriert das Iterierbare trge und ruft den nchsten Wert erst ab, wenn der aktuelle abgeschlossen ist. Promise.all() ruft alle Werte im Voraus ab und wartet sie alle ab.

Beispiele

Array von einem asynchronen Iterierbaren

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]

Wenn items ein asynchrones Iterierbares ist, bei dem jeder value ebenfalls ein Promise ist, werden diese Promises dem resultierenden Array ohne Warten hinzugefgt. Dies steht im Einklang mit dem Verhalten von for await...of.

function createAsyncIter() {
  let i = 0;
  return {
    [Symbol.asyncIterator]() {
      return {
        async next() {
          if (i > 2) return { done: true };
          i++;
          return { value: Promise.resolve(i), done: false };
        },
      };
    },
  };
}

Array.fromAsync(createAsyncIter()).then((array) => console.log(array));
// (3) [Promise, Promise, Promise]

Array von einem synchronen Iterierbaren

Array.fromAsync(
  new Map([
    [1, 2],
    [3, 4],
  ]),
).then((array) => console.log(array));
// [[1, 2], [3, 4]]

Array von einem synchronen Iterierbaren, das Promises erzeugt

Array.fromAsync(
  new Set([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]),
).then((array) => console.log(array));
// [1, 2, 3]

Array von einem array-hnlichen Objekt mit Promises

Array.fromAsync({
  length: 3,
  0: Promise.resolve(1),
  1: Promise.resolve(2),
  2: Promise.resolve(3),
}).then((array) => console.log(array));
// [1, 2, 3]

Verwendung von mapFn mit einem synchronen Iterierbaren

Wenn items ein synchrones Iterierbares oder array-hnliches Objekt ist, werden sowohl die Eingabe als auch die Ausgabe von mapFn intern durch Array.fromAsync() abgewartet.

function delayedValue(v) {
  return new Promise((resolve) => setTimeout(() => resolve(v), 100));
}

Array.fromAsync(
  [delayedValue(1), delayedValue(2), delayedValue(3)],
  (element) => delayedValue(element * 2),
).then((array) => console.log(array));
// [2, 4, 6]

Verwendung von mapFn mit einem asynchronen Iterierbaren

Wenn items ein asynchrones Iterierbares ist, wird die Eingabe an mapFn nicht abgewartet, aber die Ausgabe schon. Unter Verwendung der gleichen createAsyncIter Funktion von oben:

Array.fromAsync(createAsyncIter(), async (element) => (await element) * 2).then(
  (array) => console.log(array),
);
// [2, 4, 6]

Interessanterweise bedeutet dies, dass Array.fromAsync(createAsyncIter()) nicht gleichwertig ist mit Array.fromAsync(createAsyncIter(), (element) => element), da letztere jeden erzeugten Wert abwartet, whrend ersteres dies nicht tut.

Array.fromAsync(createAsyncIter(), (element) => element).then((array) =>
  console.log(array),
);
// [1, 2, 3]

Vergleich mit Promise.all()

Array.fromAsync() wartet jeden Wert ab, der aus dem Objekt sequentiell erzeugt wird. Promise.all() wartet alle Werte gleichzeitig ab.

function* makeIterableOfPromises() {
  for (let i = 0; i < 5; i++) {
    yield new Promise((resolve) => setTimeout(resolve, 100));
  }
}

(async () => {
  console.time("Array.fromAsync() time");
  await Array.fromAsync(makeIterableOfPromises());
  console.timeEnd("Array.fromAsync() time");
  // Array.fromAsync() time: 503.610ms

  console.time("Promise.all() time");
  await Promise.all(makeIterableOfPromises());
  console.timeEnd("Promise.all() time");
  // Promise.all() time: 101.728ms
})();

Kein Fehlerhandling fr synchrone Iterierbare

hnlich wie for await...of, wenn das Objekt, das durchlaufen wird, ein synchrones Iterierbares ist und ein Fehler beim Durchlaufen geworfen wird, wird die return() Methode des zugrunde liegenden Iterators nicht aufgerufen, sodass der Iterator nicht geschlossen wird.

function* generatorWithRejectedPromises() {
  try {
    yield 0;
    yield Promise.reject(new Error("error"));
  } finally {
    console.log("called finally");
  }
}

(async () => {
  try {
    await Array.fromAsync(generatorWithRejectedPromises());
  } catch (e) {
    console.log("caught", e);
  }
})();
// caught Error: error
// No "called finally" message

Wenn Sie den Iterator schlieen mssen, mssen Sie eine for...of Schleife verwenden und jeden Wert selbst abwarten.

(async () => {
  const arr = [];
  try {
    for (const val of generatorWithRejectedPromises()) {
      arr.push(await val);
    }
  } catch (e) {
    console.log("caught", e);
  }
})();
// called finally
// caught 3

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Polyfill von Array.fromAsync in core-js
• Indexed collections Leitfaden
• Array
• Array()
• Array.of()
• Array.from()
• for await...of