Async/Await

Die async/await-Syntax ist eine moderne und lesbarere Methode, um mit Promises in JavaScript zu arbeiten. Sie ermöglicht es Entwicklern, asynchronen Code zu schreiben, der wie synchroner Code aussieht und sich verhält. Anstatt then()-Aufrufe zu verketten, können Sie await verwenden, um die Ausführung einer async-Funktion zu pausieren, bis ein Promise aufgelöst ist.

Wie async-Funktionen funktionieren

Eine async-Funktion ist eine Funktion, die mit dem async-Schlüsselwort deklariert wird. Sie gibt standardmäßig ein Promise zurück, und Sie können das await-Schlüsselwort innerhalb der Funktion verwenden, um die Ausführung zu pausieren, bis das Promise aufgelöst ist.

Die Funktion fetchData ist als async deklariert, was es ihr ermöglicht, await zu verwenden, um die Ausführung zu pausieren, bis ein Versprechen aufgelöst wird. Hier simuliert eine Verzögerung von 2 Sekunden einen Datenabrufvorgang. Sobald es aufgelöst ist, wird das Ergebnis ("Daten erfolgreich abgerufen!") im HTML-Absatz angezeigt.

Vereinfachung von Promise-Ketten mit Async/Await

Bei der Arbeit mit mehreren asynchronen Operationen in Folge kann die Verwendung von async/await den Code vereinfachen, der sonst das Verketteln von Versprechen mit then() erfordern würde.

Sehen wir uns an, wie eine Reihe von Versprechen (wie das Abrufen und Verarbeiten von Daten) sauberer mit async/await gehandhabt werden kann.

Die Funktion processData ruft drei asynchrone Funktionen auf—fetchData, processFetchedData und displayProcessedData—nacheinander auf, wobei jede (await) auf den Abschluss der vorherigen Operation wartet, bevor sie zur nächsten übergeht. Dieser strukturierte Ablauf eliminiert die Notwendigkeit, Versprechen zu verketten, und verbessert die Lesbarkeit. Die endgültige Ausgabe ("Rohdaten verarbeitet und auf der Seite angezeigt") wird dann im HTML angezeigt.

Fehlerbehandlung mit try...catch in Async/Await

Fehler in Versprechenskette mit .catch() zu behandeln, kann umständlich werden, insbesondere bei mehreren asynchronen Operationen. Mit async/await können Sie Fehler mit dem traditionellen try...catch-Block behandeln, was die Fehlerbehandlung intuitiver und lesbarer macht.

In fetchDataWithError führt der try-Block die await-Operation aus, und wenn sie erfolgreich ist, wird das Ergebnis im HTML angezeigt. Wenn ein Fehler auftritt (wie durch simulateError simuliert), behandelt der catch-Block diesen, indem er den Absatztext auf die Fehlermeldung ("Error: Something went wrong!") setzt.