Grundlegendes zu asynchronen Vorgängen und der Verwendung von async/await in JavaScript

Wie Sie bereits wissen, ist JavaScript eine Single-Threaded-Sprache und kann jeweils eine Aktion ausführen. Allerdings können viele Vorgänge in der Webentwicklung, einschließlich des Abrufens von Daten von einem Server oder des Lesens der Dateien auf der Festplatte, einige Zeit in Anspruch nehmen. Wenn es diese Vorgänge synchron ausführt, was bedeutet, dass JavaScript warten muss, bis der Vorgang abgeschlossen ist, bevor es mit der nächsten Codezeile fortfährt, verlangsamt es die Reaktionsfähigkeit der Anwendung. Um solche Aufgaben effizienter zu erledigen, setzt JavaScript asynchrone Programmiertechniken ein.

Was sind asynchrone Vorgänge?

Asynchrone Vorgänge sind Vorgänge, die zum aktuellen Zeitpunkt initiiert werden, aber zu einem anderen Zeitpunkt beendet werden dürfen, während das Programm mit anderen Codezeilen fortfährt. In JavaScript erfolgt die Behandlung von asynchronem Verhalten durch die Verwendung von Rückrufen, Versprechen und zuletzt der Async/Await-Syntax. Dieser Ansatz sorgt dafür, dass JavaScript Aufgaben im Hintergrund ausführt und dadurch die Gesamtleistung von Web-Apps verbessert.
Stellen Sie sich beispielsweise den Fall einer Webanwendung vor, bei der Informationen über einen Benutzer aus der Datenbank abgerufen werden müssen. Dieser Vorgang kann je nach Netzwerkgeschwindigkeit oder hohem Datenverkehr zum Server einige Sekunden dauern. JavaScript kann mit dem Rest des Codes fortfahren, anstatt die Anwendung anzuhalten, während sie auf den Empfang der Daten wartet. Diese Art von nicht blockierendem Verhalten ist die Grundidee der asynchronen Programmierung.

Einführung von async/await

Die async/await-Syntax, die Teil von ES2017 (ES8) ist, ist wohl die eleganteste und am einfachsten verständliche Möglichkeit, mit asynchronem Code umzugehen. Es basiert auf Promises und bietet eine Möglichkeit, asynchronen Code wie synchronen Code aussehen zu lassen, um ihn leicht zu verstehen und zu warten.
Eine asynchrone Funktion ist eine Funktion, deren Rückgabetyp Promise ist. Wenn das Schlüsselwort async an eine Funktion angehängt wird, teilt es dem Programm mit, dass die Funktion immer ein Promise zurückgibt, unabhängig davon, ob tatsächlich ein Promise zurückgegeben wird oder nicht. Await wird innerhalb einer asynchronen Funktion verwendet, damit die Funktion auf den Abschluss oder die Ablehnung eines Versprechens warten kann.

Wie funktioniert async/await?

Lassen Sie mich nun anhand eines Beispiels veranschaulichen, wie async/await verwendet wird. Betrachten Sie den folgenden Codeausschnitt, der den Warenkorb eines Benutzers abruft und anzeigt:

In diesem Beispiel ist die getCart-Funktion als asynchron deklariert, daher kann sie das Schlüsselwort „await“ für die Verarbeitung asynchroner Vorgänge darin verwenden.

1. const cart = waiting req.user.getCart();: Dies ruft die getCart-Methode für das Benutzerobjekt auf und ruft die aktuelle Warenkorbinstanz des Benutzers ab. Das Schlüsselwort „await“ stellt sicher, dass JavaScript darauf wartet, dass das von getCart() zurückgegebene Promise abgeschlossen wird. Der aufgelöste Wert (der Warenkorb des Benutzers) wird dann der Warenkorbvariablen zugewiesen.
2. const products = waiting cart.getProducts();: Ebenso pausiert diese Zeile die Ausführung des Codes, bis die getProducts-Methode abgeschlossen ist, wodurch die Produkte in den Warenkorb des Benutzers gelegt werden. Das Schlüsselwort „await“ teilt der CLR mit, dass die folgende Codezeile erst ausgeführt werden soll, wenn die Produktdaten bereit sind.
3. Rendern der Antwort: Nach Abschluss beider asynchroner Vorgänge wird die Variable res.render() ausgeführt, um die Warenkorbseite neben den Produkten zu rendern.
4. Fehlerbehandlung mit try...catch: Der try...Finally-catch-Block wird verwendet, um alle Ausnahmen zu behandeln, die aufgrund der asynchronen Vorgänge auftreten können. Wenn bei einer der Wait-Anweisungen ein Fehler auftritt, behandelt der Catch-Block den Fehler und protokolliert ihn in der Konsole.

Vorteile der Verwendung von async/await

Die Async/Await-Syntax bietet mehrere Vorteile gegenüber herkömmlichem Promise-basiertem Code:Die Async/Await-Syntax bietet mehrere Vorteile gegenüber herkömmlichem Promise-basiertem Code:
• Verbesserte Lesbarkeit: Es ist leicht zu befolgen und zu verstehen, da der Code trotz seiner Fähigkeit, asynchrone Vorgänge zu verarbeiten, wie normaler synchroner Code aussieht.
• Fehlerbehandlung: Die Verwendung von try...Async/await macht die Fehlerbehandlung so einfach und einheitlich wie das Abfangen des Fehlers mit sync/async.
• Vereinfacht komplexe Vorgänge: async/await sollte für den Code verwendet werden, der über mehrere asynchrone Vorgänge verfügt, da der Code dann einfacher zu schreiben, zu testen und zu debuggen ist.

Abschluss

Asynchrone Programmierung ist in JavaScript besonders wichtig, um rechenintensive Vorgänge auszuführen, ohne den Hauptthread zu blockieren. Die async/await-Syntax bietet eine ausgefeiltere Möglichkeit, mit diesen Vorgängen umzugehen, und der generierte Code ist besser lesbar, sauberer und einfacher zu debuggen. Async/await hilft Entwicklern, asynchronen Code zu schreiben, wodurch ihre Anwendung vorhersehbarer und schneller wird.

Das obige ist der detaillierte Inhalt vonGrundlegendes zu asynchronen Vorgängen und der Verwendung von async/await in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!