Diefor await...of-Anweisung erstellt eine Schleife, die überasynchronen iterierbaren Objekten sowiesynchronen Iterables iteriert. Diese Anweisung kann nur in Kontexten verwendet werden, in denenawait verwendet werden kann, was den Körper einerasynchronen Funktion und einModul einschließt.

Probieren Sie es aus

async function* foo() {  yield 1;  yield 2;}(async () => {  for await (const num of foo()) {    console.log(num);    // Expected output: 1    break; // Closes iterator, triggers return  }})();

Syntax

for await (variable of iterable)  statement

variable

Empfängt bei jeder Iteration einen Wert aus der Sequenz. Kann entweder eine Deklaration mitconst,let odervar sein oder einZuweisungsziel (z. B. eine zuvor deklarierte Variable, eine Objekteigenschaft oder einDestrukturierungsmuster). Variablen, die mitvar deklariert wurden, sind nicht lokal für die Schleife, d.h. sie befinden sich im gleichen Gültigkeitsbereich wie diefor await...of-Schleife.

iterable

Ein asynchrones oder synchrones Iterable. Die Quelle der Wertsequenz, über die die Schleife operiert.

statement

Eine Anweisung, die bei jeder Iteration ausgeführt wird. Kann aufvariable verweisen. Sie können eineBlock-Anweisung verwenden, um mehrere Anweisungen auszuführen.

Beschreibung

Wenn einefor await...of-Schleife über ein Iterable iteriert, ruft sie zuerst die[Symbol.asyncIterator]()-Methode des Iterables auf und ruft diese auf, die einenasynchronen Iterator zurückgibt. Wenn die@asyncIterator-Methode nicht existiert, sucht sie nach einer[Symbol.iterator]()-Methode, die einensynchronen Iterator zurückgibt. Der zurückgegebene synchrone Iterator wird dann in einen asynchronen Iterator umgewandelt, indem jedes von dennext(),return() undthrow()-Methoden zurückgegebene Objekt in ein erfülltes oder abgelehntes Promise gewickelt wird, wobei dievalue-Eigenschaft aufgelöst wird, wenn sie ebenfalls ein Promise ist. Die Schleife ruft dann wiederholt dienext()-Methode des endgültigen asynchronen Iterators auf und wartet das zurückgegebene Promise ab, um die Wertesequenz zu erzeugen, dievariable zugewiesen wird.

Einefor await...of-Schleife wird beendet, wenn der Iterator abgeschlossen ist (das erwartetenext()-Ergebnis ist ein Objekt mitdone: true). Wie bei anderen Schleifenanweisungen können SieKontrollflussanweisungen innerhalb derstatement verwenden:

• break stoppt die Ausführung vonstatement und fährt mit der ersten Anweisung nach der Schleife fort.
• continue stoppt die Ausführung vonstatement und fährt mit der nächsten Iteration der Schleife fort.

Wenn diefor await...of-Schleife vorzeitig beendet wurde (z. B. wenn einebreak-Anweisung auftritt oder ein Fehler auftritt), wird diereturn()-Methode des Iterators aufgerufen, um Aufräumarbeiten durchzuführen. Das zurückgegebene Promise wird erwartet, bevor die Schleife beendet wird.

for await...of funktioniert im Allgemeinen wie diefor...of-Schleife und teilt viele der gleichen Syntax und Semantik. Es gibt ein paar Unterschiede:

• for await...of funktioniert bei sowohl synchronen als auch asynchronen Iterables, währendfor...of nur bei synchronen Iterables funktioniert.
• for await...of kann nur in Kontexten verwendet werden, in denenawait verwendet werden kann, was den Körper einerasynchronen Funktion und einModul einschließt. Auch wenn das Iterable synchron ist, wartet die Schleife trotzdem den Rückgabewert für jede Iteration, was aufgrund des wiederholten Entpackens von Promises zu einer langsameren Ausführung führt.
• Wenn dasiterable ein synchrones Iterable ist, das Promises liefert, würdefor await...of eine Sequenz von aufgelösten Werten generieren, währendfor...of eine Sequenz von Promises generieren würde. (Seien Sie jedoch vorsichtig bei der Fehlerbehandlung und Aufräumarbeiten — sieheIterieren über synchrone Iterables und Generatoren)
• Fürfor await...of kann dievariable der Bezeichnerasync sein (z. B.for await (async of foo));for...of verbietet diesen Fall.

Wiefor...of, wenn Sie eineusing-Deklaration verwenden, darf die Variable nichtof genannt werden:

for await (using of of []); // SyntaxError

Dies ist, um Syntax-Mehrdeutigkeiten mit dem gültigen Codefor await (using of []) zu vermeiden, bevorusing eingeführt wurde.

Beispiele

Iterieren über asynchrone Iterables

Sie können auch über ein Objekt iterieren, das das asynchrone iterierbare Protokoll explizit implementiert:

const LIMIT = 3;const asyncIterable = {  [Symbol.asyncIterator]() {    let i = 0;    return {      next() {        const done = i === LIMIT;        const value = done ? undefined : i++;        return Promise.resolve({ value, done });      },      return() {        // This will be reached if the consumer called 'break' or 'return' early in the loop.        return { done: true };      },    };  },};(async () => {  for await (const num of asyncIterable) {    console.log(num);  }})();// 0// 1// 2

Iterieren über asynchrone Generatoren

Da die Rückgabewerte von asynchronen Generatorfunktionen dem asynchronen iterierbaren Protokoll entsprechen, können sie mitfor await...of durchlaufen werden.

async function* asyncGenerator() {  let i = 0;  while (i < 3) {    yield i++;  }}(async () => {  for await (const num of asyncGenerator()) {    console.log(num);  }})();// 0// 1// 2

Für ein konkreteres Beispiel des Iterierens über einen asynchronen Generator mithilfe vonfor await...of betrachten Sie das Iterieren über Daten von einer API.

Dieses Beispiel erstellt zunächst ein asynchrones Iterable für einen Datenstrom und verwendet es dann, um die Größe der Antwort von der API zu ermitteln.

async function* streamAsyncIterable(stream) {  const reader = stream.getReader();  try {    while (true) {      const { done, value } = await reader.read();      if (done) return;      yield value;    }  } finally {    reader.releaseLock();  }}// Fetches data from URL and calculates response size using the async generator.async function getResponseSize(url) {  const response = await fetch(url);  // Will hold the size of the response, in bytes.  let responseSize = 0;  // The for-await-of loop. Async iterates over each portion of the response.  for await (const chunk of streamAsyncIterable(response.body)) {    // Incrementing the total response length.    responseSize += chunk.length;  }  console.log(`Response Size: ${responseSize} bytes`); // "Response Size: 1071472"  return responseSize;}getResponseSize("https://jsonplaceholder.typicode.com/photos");

Iterieren über synchrone Iterables und Generatoren

Diefor await...of-Schleife konsumiert auch synchrone Iterables und Generatoren. In diesem Fall wartet sie intern die ausgegebenen Werte ab, bevor sie sie der Schleifensteuerungsvariablen zuweist.

function* generator() {  yield 0;  yield 1;  yield Promise.resolve(2);  yield Promise.resolve(3);  yield 4;}(async () => {  for await (const num of generator()) {    console.log(num);  }})();// 0// 1// 2// 3// 4// compare with for-of loop:for (const numOrPromise of generator()) {  console.log(numOrPromise);}// 0// 1// Promise { 2 }// Promise { 3 }// 4

function* generatorWithRejectedPromises() {  try {    yield 0;    yield 1;    yield Promise.resolve(2);    yield Promise.reject(new Error("failed"));    yield 4;    throw new Error("throws");  } finally {    console.log("called finally");  }}(async () => {  try {    for await (const num of generatorWithRejectedPromises()) {      console.log(num);    }  } catch (e) {    console.log("caught", e);  }})();// 0// 1// 2// caught Error: failed// compare with for-of loop:try {  for (const numOrPromise of generatorWithRejectedPromises()) {    console.log(numOrPromise);  }} catch (e) {  console.log("caught", e);}// 0// 1// Promise { 2 }// Promise { <rejected> Error: failed }// 4// caught Error: throws// called finally

Um sicherzustellen, dass diefinally-Blöcke eines synchronen Generators immer aufgerufen werden, verwenden Sie die geeignete Form der Schleife —for await...of für den asynchronen Generator undfor...of für den synchronen — und warten Sie explizit ab, dass Promises innerhalb der Schleife ausgegeben werden.

(async () => {  try {    for (const numOrPromise of generatorWithRejectedPromises()) {      console.log(await numOrPromise);    }  } catch (e) {    console.log("caught", e);  }})();// 0// 1// 2// caught Error: failed// called finally

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Symbol.asyncIterator
• for...of