Verwendung von Async/Await für Übersichtlichere Asynchrone Code
Die async/await-Syntax ist eine moderne und besser lesbare Methode, um mit Promises in JavaScript zu arbeiten. Sie ermöglicht es Entwicklern, asynchronen Code zu schreiben, der wie synchroner Code aussieht und sich auch so verhält. Anstatt then()-Aufrufe zu verketten, kann mit await die Ausführung einer async-Funktion angehalten werden, bis ein Promise aufgelöst ist.
Funktionsweise von async-Funktionen
Eine async-Funktion ist eine Funktion, die mit dem Schlüsselwort async deklariert wird. Sie gibt standardmäßig ein Promise zurück, und innerhalb der Funktion kann das Schlüsselwort await verwendet werden, um die Ausführung anzuhalten, bis das Promise aufgelöst ist.
index.html
index.js
Die Funktion fetchData ist als async deklariert, wodurch sie await verwenden kann, um die Ausführung anzuhalten, bis ein Promise aufgelöst wird. Hier simuliert eine Verzögerung von 2 Sekunden einen Datenabrufvorgang. Nach der Auflösung wird das Ergebnis ("Data fetched successfully!") im HTML-Absatz angezeigt.
Vereinfachung von Promise-Ketten mit Async/Await
Bei der Arbeit mit mehreren asynchronen Operationen in Folge kann async/await den Code vereinfachen, der sonst Promise-Ketten mit then() erfordern würde.
Im Folgenden wird gezeigt, wie eine Reihe von Promises (wie das Abrufen und Verarbeiten von Daten) mit async/await übersichtlicher gehandhabt werden kann.
index.html
index.js
Die Funktion processData ruft drei asynchrone Funktionen auf—fetchData, processFetchedData und displayProcessedData—nacheinander, wobei jede (await) auf den Abschluss der vorherigen Operation wartet, bevor sie zur nächsten übergeht. Dieser strukturierte Ablauf macht das Verketten von Promises überflüssig und verbessert die Lesbarkeit. Die endgültige Ausgabe ("Raw Data processed and displayed on the page") wird anschließend im HTML angezeigt.
Fehlerbehandlung mit try...catch in Async/Await
Die Fehlerbehandlung in Promise-Ketten mit .catch() kann umständlich werden, insbesondere bei mehreren asynchronen Operationen. Mit async/await kann die Fehlerbehandlung durch den traditionellen try...catch-Block erfolgen, was die Fehlerbehandlung intuitiver und lesbarer macht.
index.html
index.js
In fetchDataWithError führt der try-Block die await-Operation aus. Bei Erfolg wird das Ergebnis im HTML angezeigt. Tritt ein Fehler auf (wie durch simulateError simuliert), behandelt der catch-Block diesen, indem er den Absatztext auf die Fehlermeldung ("Error: Something went wrong!") setzt.
1. Was bewirkt das Schlüsselwort async, wenn es zu einer Funktion hinzugefügt wird?
2. Welchen Zweck hat das Schlüsselwort await?
3. Welcher der folgenden Vorteile ergibt sich durch die Verwendung von async/await im Vergleich zur .then()-Verkettung?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.22Verwendung von Async/Await für Übersichtlichere Asynchrone Code
Swipe um das Menü anzuzeigen
Die async/await-Syntax ist eine moderne und besser lesbare Methode, um mit Promises in JavaScript zu arbeiten. Sie ermöglicht es Entwicklern, asynchronen Code zu schreiben, der wie synchroner Code aussieht und sich auch so verhält. Anstatt then()-Aufrufe zu verketten, kann mit await die Ausführung einer async-Funktion angehalten werden, bis ein Promise aufgelöst ist.
Funktionsweise von async-Funktionen
Eine async-Funktion ist eine Funktion, die mit dem Schlüsselwort async deklariert wird. Sie gibt standardmäßig ein Promise zurück, und innerhalb der Funktion kann das Schlüsselwort await verwendet werden, um die Ausführung anzuhalten, bis das Promise aufgelöst ist.
index.html
index.js
Die Funktion fetchData ist als async deklariert, wodurch sie await verwenden kann, um die Ausführung anzuhalten, bis ein Promise aufgelöst wird. Hier simuliert eine Verzögerung von 2 Sekunden einen Datenabrufvorgang. Nach der Auflösung wird das Ergebnis ("Data fetched successfully!") im HTML-Absatz angezeigt.
Vereinfachung von Promise-Ketten mit Async/Await
Bei der Arbeit mit mehreren asynchronen Operationen in Folge kann async/await den Code vereinfachen, der sonst Promise-Ketten mit then() erfordern würde.
Im Folgenden wird gezeigt, wie eine Reihe von Promises (wie das Abrufen und Verarbeiten von Daten) mit async/await übersichtlicher gehandhabt werden kann.
index.html
index.js
Die Funktion processData ruft drei asynchrone Funktionen auf—fetchData, processFetchedData und displayProcessedData—nacheinander, wobei jede (await) auf den Abschluss der vorherigen Operation wartet, bevor sie zur nächsten übergeht. Dieser strukturierte Ablauf macht das Verketten von Promises überflüssig und verbessert die Lesbarkeit. Die endgültige Ausgabe ("Raw Data processed and displayed on the page") wird anschließend im HTML angezeigt.
Fehlerbehandlung mit try...catch in Async/Await
Die Fehlerbehandlung in Promise-Ketten mit .catch() kann umständlich werden, insbesondere bei mehreren asynchronen Operationen. Mit async/await kann die Fehlerbehandlung durch den traditionellen try...catch-Block erfolgen, was die Fehlerbehandlung intuitiver und lesbarer macht.
index.html
index.js
In fetchDataWithError führt der try-Block die await-Operation aus. Bei Erfolg wird das Ergebnis im HTML angezeigt. Tritt ein Fehler auf (wie durch simulateError simuliert), behandelt der catch-Block diesen, indem er den Absatztext auf die Fehlermeldung ("Error: Something went wrong!") setzt.
1. Was bewirkt das Schlüsselwort async, wenn es zu einer Funktion hinzugefügt wird?
2. Welchen Zweck hat das Schlüsselwort await?
3. Welcher der folgenden Vorteile ergibt sich durch die Verwendung von async/await im Vergleich zur .then()-Verkettung?
Danke für Ihr Feedback!
