Ein praktischer Leitfaden zu Aysnc und Await für JavaScript-Entwickler

Einführung

Async und Await sind JavaScript-Schlüsselwörter, die in ECMAScript 2017 (ES8) eingeführt wurden und das Schreiben von asynchronem Code auf eine besser lesbare, synchrone und verwaltbare Weise ermöglichen. Sie vereinfachen die Handhabung zeitaufwändiger Vorgänge, z. B. das Abrufen von Daten von einer API.

Bevor wir eintauchen, wollen wir zunächst die Konzepte der synchronen und asynchronen Programmierung in JavaScript verstehen. Bei der synchronen Programmierung werden Aufgaben sequentiell, eine nach der anderen, in der Reihenfolge ihres Auftretens ausgeführt. Jede Aufgabe muss abgeschlossen sein, bevor die nächste beginnt. Andererseits ermöglicht die asynchrone Programmierung die Ausführung von Aufgaben im Hintergrund, sodass JavaScript weiterhin andere Aufgaben ausführen kann, ohne auf den Abschluss der vorherigen warten zu müssen.

Wie wir wissen, ist JavaScript eine Single-Threaded-Sprache, was bedeutet, dass sie jeweils nur eine Aufgabe ausführen kann. Wenn das der Fall ist, wie geht JavaScript mit asynchronem Code um? Möglich wird dies durch die Event-Schleife, einen Schlüsselmechanismus, der neben der JavaScript-Laufzeitumgebung arbeitet. Die Ereignisschleife ermöglicht die Ausführung asynchroner Vorgänge, ohne den Hauptthread zu blockieren, und stellt so sicher, dass JavaScript reaktionsfähig bleibt. Schnappen Sie sich ohne weitere Verzögerung eine Tasse Kaffee und stürzen wir uns direkt in das heutige Thema!

Was ist Async?

Um dieses Konzept besser zu verstehen, verfolgen wir einen praktischeren Ansatz. Vor der Einführung von Async und Wait wurden Promises auf die „alte Art“ verarbeitet, die in ES6 (ECMAScript 2015) eingeführt wurde. Sehen wir uns das folgende Beispiel an.

Der obige Code zeigt die traditionelle Syntax für die Handhabung von Promises. Der Promise-Konstruktor wird zum Erstellen einer neuen Promise-Instanz verwendet. Es akzeptiert eine Funktion (bekannt als Executor-Funktion) als Argument, die zwei Parameter enthält: Auflösung und Ablehnung. Diese Executor-Funktion enthält die Logik für den asynchronen Vorgang. In diesem Beispiel wird „resolve“ sofort aufgerufen und signalisiert, dass das Promise mit einem bestimmten Wert erfolgreich abgeschlossen wurde. Sobald das Promise aufgelöst ist, wird die .then-Methode ausgelöst und führt ihren Rückruf aus, um das Ergebnis zu protokollieren.

Allerdings kann es etwas schwierig sein, sich diese Syntax zu merken. Die Einführung von async/await vereinfachte den Prozess der Handhabung von Versprechen und machte sie viel einfacher zu lesen und zu verstehen. Schauen wir uns unten ein Beispiel an.

Um eine asynchrone Funktion zu implementieren, verwenden wir das Schlüsselwort async, das JavaScript mitteilt, dass es sich nicht um eine reguläre, sondern um eine asynchrone Funktion handelt. Das zweite Beispiel zeigt, wie dasselbe mit einer Pfeilfunktion durchgeführt werden kann.

Ein weiteres wichtiges Konzept, das Sie beachten sollten, ist das Schlüsselwort „await“. Sowohl „async“ als auch „await“ arbeiten zusammen, um die Handhabung von Promises zu vereinfachen. Das Schlüsselwort „await“ kann nur innerhalb einer asynchronen Funktion verwendet werden – es kann nicht außerhalb einer Funktion oder innerhalb einer regulären Funktion verwendet werden. Es muss immer innerhalb einer als asynchron markierten Funktion erscheinen. Nachdem wir uns nun mit den Grundlagen befasst haben, tauchen wir tiefer in das Konzept ein!

Wie es hinter den Kulissen funktioniert

Viele JavaScript-Entwickler verwenden Async/Await regelmäßig in ihrem Code, aber nur wenige verstehen wirklich, wie es unter der Haube funktioniert. Hier kommt dieses Tutorial ins Spiel. Sehen wir uns ein Beispiel an, um es aufzuschlüsseln.

In diesem Beispiel verwenden wir die .then-Methode, um besser zu verstehen, wie Promises im Vergleich zum async/await-Ansatz funktionieren. Wenn die Funktion handlePromise() aufgerufen wird, wird der Code Zeile für Zeile ausgeführt. Wenn JavaScript auf die .then-Methode stößt, registriert es den Rückruf in der Microtask-Warteschlange, geht sofort zur nächsten Zeile über und gibt „Hallo Welt“ aus.

Sobald alle synchronen Aufgaben abgeschlossen sind, überprüft die JavaScript-Engine die Microtask-Warteschlange auf ausstehende Aufgaben. Nach fünf Sekunden ist setTimeout abgeschlossen und sein Rückruf wird an den Aufrufstapel zurückgesendet. An diesem Punkt wird das Versprechen aufgelöst und der registrierte Rückruf wird ausgeführt und das Ergebnis protokolliert.

Kurz gesagt: Die JavaScript-Engine wartet nicht, sondern geht direkt zur nächsten Codezeile über. Gilt nun das gleiche Verhalten bei der Verwendung von async/await oder funktioniert es anders? Finden wir es heraus!

Im obigen Beispiel wird beim Aufruf der Funktion handlePromise() die erste Zeile „the start“ gedruckt. JavaScript stößt dann auf das Schlüsselwort „await“, das darauf hinweist, dass die Funktion asynchron ist und ein Promise beinhaltet. Es zeigt an, dass die Auflösung des Versprechens aufgrund des setTimeout fünf Sekunden dauern wird. Zu diesem Zeitpunkt wird die Funktion handlePromise() angehalten (aus dem Aufrufstapel entfernt) und jeglicher Code nach dem Warten innerhalb der Funktion wird angehalten.

Die JavaScript-Engine führt weiterhin den Rest des Programms aus. Nach fünf Sekunden wird das Promise aufgelöst, die angehaltene Funktion wird an den Aufrufstapel zurückgegeben und die verbleibenden Zeilen in handlePromise() „Promise wird aufgelöst“ und „das Ende“ werden nacheinander ausgeführt.

Es ist wichtig zu beachten, dass das Anhalten der Funktion den Hauptthread nicht blockiert. Wenn außerhalb der Funktion handlePromise() anderer Code geschrieben ist, wird dieser ausgeführt, während das Promise auf seine Auflösung wartet.

Das folgende Beispiel zeigt dieses Verhalten in Aktion:

In diesem Beispiel ist die erste Ausgabe der Start. Wenn JavaScript auf das Schlüsselwort „await“ stößt, erkennt es, dass die Auflösung des Promise fünf Sekunden dauern wird. An diesem Punkt wird die Funktion angehalten und JavaScript fährt mit der Ausführung von Code außerhalb der Funktion fort. Als nächstes wird „Wir sind draußen“ gedruckt.

Sobald das Promise nach fünf Sekunden aufgelöst ist, wird die Funktion handlePromise() im Aufrufstapel wiederhergestellt und die verbleibenden Zeilen werden ausgeführt. Das Drucken von „Promise wird aufgelöst“ gefolgt vom Ende erfolgt.

Lassen Sie uns ein weiteres Beispiel untersuchen. Wir werden versuchen, einen API-Aufruf mit async/await in einem anderen Fall durchzuführen, um das Konzept besser zu verstehen.

Im obigen Code folgt der Ausführungsprozess denselben Prinzipien, die zuvor erläutert wurden. Wenn JavaScript auf die Fetch-Funktion stößt, unterbricht es die getData()-Funktionen und wartet darauf, dass der Fetch-Aufruf ein Antwortobjekt zurückgibt. Dieses Objekt enthält verschiedene Eigenschaften wie Status, Header und Text der Antwort. Die Funktion nimmt dann die Ausführung wieder auf, sobald die Antwort verfügbar ist.

Der Antworttext besteht aus den Daten, die wir benötigen, aber sie liegen in Rohform (z. B. Text oder Binärform) vor und sind nicht sofort verwendbar. Um es zur einfacheren Handhabung in ein JavaScript-Objekt umzuwandeln, verwenden wir die Methode .json(), die die rohe JSON-Antwort analysiert. Dieser Prozess beinhaltet ein weiteres Versprechen, weshalb das zweite Warten notwendig ist. Die Funktion wird erneut angehalten, bis das Versprechen aufgelöst wird.

Sobald beide Versprechen erfüllt sind, wird die Funktion getData() fortgesetzt und die analysierten Daten werden auf der Konsole ausgegeben. Eine einfache Möglichkeit zu erklären, wie Fetch funktioniert, nicht wahr? Nun zurück zu unserer Hauptdiskussion! Was passiert, wenn unsere API-Antwort fehlschlägt? Wie verwalten wir Fehler mit async/await? Lassen Sie uns im nächsten Abschnitt näher darauf eingehen.

Umgang mit Fehlern mit Async/Await

Traditionell wurden Fehler in Promises mit der .catch-Methode behandelt. Aber wie können wir mit Fehlern umgehen, wenn wir async/await verwenden? Hier kommt der try...catch-Block ins Spiel.

Im obigen Code ist das Promise in einen Try-Block eingeschlossen, der ausgeführt wird, wenn das Promise erfolgreich aufgelöst wird. Wenn das Versprechen jedoch abgelehnt wird, wird der Fehler abgefangen und im Catch-Block behandelt.

Aber wussten Sie, dass wir mit Fehlern immer noch auf traditionelle Weise umgehen können? Hier ist ein Beispiel:

Um Fehler in async/await mit dem herkömmlichen Ansatz zu behandeln, fügen Sie einfach die Catch-Methode an die Funktion an, wie oben gezeigt. Er funktioniert auf die gleiche Weise wie der Try/Catch-Block.

Abschluss

Async/await hat die Art und Weise, wie JavaScript asynchrone Vorgänge verarbeitet, revolutioniert und den Code im Vergleich zu herkömmlichen Methoden wie .then und .catch besser lesbar und einfacher zu verwalten gemacht. Durch die Nutzung von „async“ und „await“ können wir asynchronen Code schreiben, der sich synchroner anfühlt und so die Gesamtklarheit des Codes verbessert. Während man die inneren Abläufe – wie die Ereignisschleife und die Mikrotask-Warteschlange – versteht, ist die Implementierung von async/await unkompliziert und äußerst effektiv für die moderne JavaScript-Entwicklung. Mit der richtigen Fehlerbehandlung mithilfe von try/catch oder .catch können wir sowohl erfolgreiche als auch fehlgeschlagene Versprechen sicher verwalten.

Vielen Dank fürs Bleiben! Ich hoffe, dieser Artikel hat async/await für Sie etwas klarer gemacht. Ich wünsche Ihnen viel Erfolg bei Ihren Programmierabenteuern – bauen Sie etwas Großartiges!

Das obige ist der detaillierte Inhalt vonEin praktischer Leitfaden zu Aysnc und Await für JavaScript-Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!