for await...of

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

Empfngt bei jeder Iteration einen Wert aus der Sequenz. Kann entweder eine Deklaration mit const, let oder var sein oder ein Zuweisungsziel (z. B. eine zuvor deklarierte Variable, eine Objekteigenschaft oder ein Destrukturierungsmuster). Variablen, die mit var deklariert wurden, sind nicht lokal fr die Schleife, d.h. sie befinden sich im gleichen Gltigkeitsbereich wie die for 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 ausgefhrt wird. Kann auf variable verweisen. Sie knnen eine Block-Anweisung verwenden, um mehrere Anweisungen auszufhren.

Beschreibung

Wenn eine for await...of-Schleife ber ein Iterable iteriert, ruft sie zuerst die [Symbol.asyncIterator]()-Methode des Iterables auf und ruft diese auf, die einen asynchronen Iterator zurckgibt. Wenn die @asyncIterator-Methode nicht existiert, sucht sie nach einer [Symbol.iterator]()-Methode, die einen synchronen Iterator zurckgibt. Der zurckgegebene synchrone Iterator wird dann in einen asynchronen Iterator umgewandelt, indem jedes von den next(), return() und throw()-Methoden zurckgegebene Objekt in ein erflltes oder abgelehntes Promise gewickelt wird, wobei die value-Eigenschaft aufgelst wird, wenn sie ebenfalls ein Promise ist. Die Schleife ruft dann wiederholt die next()-Methode des endgltigen asynchronen Iterators auf und wartet das zurckgegebene Promise ab, um die Wertesequenz zu erzeugen, die variable zugewiesen wird.

Eine for await...of-Schleife wird beendet, wenn der Iterator abgeschlossen ist (das erwartete next()-Ergebnis ist ein Objekt mit done: true). Wie bei anderen Schleifenanweisungen knnen Sie Kontrollflussanweisungen innerhalb der statement verwenden:

• break stoppt die Ausfhrung von statement und fhrt mit der ersten Anweisung nach der Schleife fort.
• continue stoppt die Ausfhrung von statement und fhrt mit der nchsten Iteration der Schleife fort.

Wenn die for await...of-Schleife vorzeitig beendet wurde (z. B. wenn eine break-Anweisung auftritt oder ein Fehler auftritt), wird die return()-Methode des Iterators aufgerufen, um Aufrumarbeiten durchzufhren. Das zurckgegebene Promise wird erwartet, bevor die Schleife beendet wird.

for await...of funktioniert im Allgemeinen wie die for...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, whrend for...of nur bei synchronen Iterables funktioniert.
• for await...of kann nur in Kontexten verwendet werden, in denen await verwendet werden kann, was den Krper einer asynchronen Funktion und ein Modul einschliet. Auch wenn das Iterable synchron ist, wartet die Schleife trotzdem den Rckgabewert fr jede Iteration, was aufgrund des wiederholten Entpackens von Promises zu einer langsameren Ausfhrung fhrt.
• Wenn das iterable ein synchrones Iterable ist, das Promises liefert, wrde for await...of eine Sequenz von aufgelsten Werten generieren, whrend for...of eine Sequenz von Promises generieren wrde. (Seien Sie jedoch vorsichtig bei der Fehlerbehandlung und Aufrumarbeiten siehe Iterieren ber synchrone Iterables und Generatoren)
• Fr for await...of kann die variable der Bezeichner async sein (z. B. for await (async of foo)); for...of verbietet diesen Fall.

Wie for...of, wenn Sie eine using-Deklaration verwenden, darf die Variable nicht of genannt werden:

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

Dies ist, um Syntax-Mehrdeutigkeiten mit dem gltigen Code for await (using of []) zu vermeiden, bevor using eingefhrt wurde.

Beispiele

Iterieren ber asynchrone Iterables

Sie knnen 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 Rckgabewerte von asynchronen Generatorfunktionen dem asynchronen iterierbaren Protokoll entsprechen, knnen sie mit for 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

Fr ein konkreteres Beispiel des Iterierens ber einen asynchronen Generator mithilfe von for await...of betrachten Sie das Iterieren ber Daten von einer API.

Dieses Beispiel erstellt zunchst ein asynchrones Iterable fr einen Datenstrom und verwendet es dann, um die Gre 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

Die for 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 die finally-Blcke eines synchronen Generators immer aufgerufen werden, verwenden Sie die geeignete Form der Schleife for await...of fr den asynchronen Generator und for...of fr 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-Kompatibilitt

Siehe auch

• Symbol.asyncIterator
• for...of