Async/Warte -Funktionen in JavaScript | verstehen | Mit Beispielen erklärt

Das Schlüsselwort Async wird verwendet, um eine Funktion in eine umzuwandeln Asynchronisierungsfunktion während erwarten Schlüsselwort ist nur in einem verwendbar asynchron Funktion. Async und Auseait werden zur asynchronen Ausführung des Programms verwendet und implementieren eine vielversprechende Funktionalität für den Code.

Asynchron Schlüsselwort Wenn die Funktion einer Funktion verwendet wird, gibt die Funktion a zurück Versprechen, während erwarten Die Funktion lässt die asynchronisierte Funktion warten, bis ein Versprechen darin zurückgegeben wird. Um die Verwendung von Async zu verstehen und auf Funktionen zu warten, müssen Sie ein scharfes Verständnis dafür haben, wie Versprechen in JavaScript funktionieren.

Async and Awit ist ein JavaScript-Konzept auf fortgeschrittener Ebene. Deshalb werden wir es an verschiedenen Beispielen lernen und verstehen, indem wir die Beispielzeile für Linie durchlaufen.

Sequentielle Ausführung in JavaScript

JavaScript ist nacheinander ausgeführt oder wir können sagen. Der Code wird auf prozedurale Weise von Zeile aufgerufen.

Betrachten Sie die nach unten eingegebenen Codezeilen:

Funktion hello ()
Konsole.log ("Hallo Welt");
LinuxHint ();

Funktion LinuxHint ()
Konsole.log ("Tutorial von LinuxHint");

Konsole.log ("Code wird in der Reihenfolge ausgeführt, die er aufgerufen wird");
Hallo();

Beobachten Sie die Ausgabe auf der Konsole als:

Wie Sie sehen können, wurden die zuerst aufgerufenen Funktionen oder Zeilen immer zuerst fertiggestellt. Der Grund, Ihnen ein einfaches Beispiel wie dieses zu zeigen, bestand darin, Sie bemerken zu.

Asynchron/ wartet in Aktion

Betrachten Sie eine einfache Funktion, die einen Text zurückgibt, wie:

Funktion getUsers ()
Konsole.log ("Innerhalb der GetUsers -Funktion");
Rückgabe "Benutzer";

Konsole.log ("Start des Codes");
var list = getUsers ();
Konsole.Protokoll (Liste);
Konsole.log ("Ende des Codes");

Die Ausgabe des folgenden Codes lautet:

Wie wir sehen können, dass die Funktion als Zeichenfolge zurückgegeben wird, die Nutzer besagen. Versuchen wir, das Keyword zu platzieren asynchron Vor der Funktionsdefinition als:

asynchrische Funktion getUsers ()
Konsole.log ("Innerhalb der GetUsers -Funktion");
Rückgabe "Benutzer";

In Ihrer Konsole werden Sie nun sehen, dass diesmal die Funktion ein Versprechen zurückgegeben hat, das den Status „erfüllt“ hatte:

In Fällen, in denen Sie einige Daten von einer REST -API oder einer Web -API abrufen. In solchen Fällen warten wir auf die Rückkehr des Ergebnisergebnisses des Versprechens, indem wir die verwenden erwarten Stichwort.

Dafür verwenden wir die Fetch -API und holen die Informationen über Benutzer aus der „API.GitHub/Benutzer “mit den folgenden Codezeilen:

asynchrische Funktion getUsers ()
Konsole.log ("Innerhalb der GetUsers -Funktion");
const response = warte fetch ("https: // api.Github.com/user ");
Konsole.log ("API geantwortet, Benutzer empfangen");
const user = wartet die Antwort.JSON ();
Konsole.log ("konvertiert JSON");
Rückkehrbenutzer;

Hier gibt es viele Dinge zu erklären:

• Wenn eine neue Variable mit dieser Funktion initialisiert wird, wird die erste Zeile ausgeführt und der Text wird auf die Konsole gedruckt.
• Wenn der Code das Schlüsselwort erreicht erwarten Es wird prüfen, ob das Versprechen erfüllt oder ausstehend ist. Wenn es sich im ausstehenden Zustand befindet, wird diese Funktion beendet und andere Teile des Code ausgeführt.
• Nachdem Sie andere Teile des Code ausgeführt haben.
• Nach Erhalt eines erfüllten/abgelehnten Status wird die nächste Zeile ausgeführt, nämlich Konsole.Protokoll().
• In der nächsten Zeile, Antwort.JSON ist auch ein Versprechen, es wird nach seinem Status prüfen und nach dem Ausgleichsstatus die Funktion beenden und die anderen Teile des Codes ausführen.
• Nachdem der andere Code ausgeführt wird, wird der Zeiger in die Funktion zurückkehren. Überprüfen Sie den Status von Antwort.JSON, und beim erfüllten/abgelehnten Status wird die nächste Zeile ausgeführt.

Auf diese Weise verlässt dieses gesamte Programm die normale sequentielle Ausführung und implementieren eine asynchrone Ausführung des Codes mithilfe von Versprechen und asynchron/wartet Schlüsselwörter.

Der komplette Code -Snippet lautet wie:

asynchrische Funktion getUsers ()
Konsole.log ("Innerhalb der GetUsers -Funktion");
const response = warte fetch ("https: // api.Github.com/user ");
Konsole.log ("API geantwortet, Benutzer empfangen");
const user = wartet die Antwort.JSON ();
Konsole.log ("konvertiert JSON");
Rückkehrbenutzer;

Konsole.log ("Code startet");
var list = getUsers ();
Konsole.log ("Variableliste erstellt");
Konsole.Protokoll (Liste);
Liste.Dann ((Benutzer) => Konsole.Protokoll (Benutzer));
Konsole.log ("letzte Zeile des Code");

Notiz: Die Linie "Liste.Dann ((Benutzer) => Konsole.Protokoll (Benutzer));Wird erst in der Funktion ausgeführt Getusers befasst sich mit allen Versprechen und gibt den Wert zurück, auch hier wird sich die sequentielle Ausführung ändern.

Wenn Sie dieses Programm nun als Skript einer HTML -Datei ausführen, sehen Sie die folgende Ausgabe auf Ihrer Konsole:

Untersuchen Sie die Ausgabe genau und Sie werden den Ausführungfluss als:

• Der Code startet und die Variable wird in der Funktion deklariert.
• Der Zeiger geht in die Funktion, druckt die erste Zeile, sieht die erwarten Schlüsselwort, die Funktion verlässt und ein anhängiges Versprechen an die Variable zurückgibtListeDas haben wir gerade erstellt.
• Führt andere Teile des Codes aus (deshalb können Sie sehen “letzte Zeile des Codes”), Während er auf das Versprechen in der wartet erwarten.
• Sieht die Linie Liste.Dann() aber es wird erst in der Funktion ausgeführt Getusers Gibt ein Versprechen mit einem Status zurück, der gelöst/abgelehnt wurde.
• Geht zurück in die Funktion, antwortet API, erstellt eine Liste von Benutzern und konvertiert sie in JSON.
• Der Status der von der asynchronen Funktion zurückgegebenen Versprechen Getusers Änderungen zu erfüllt und die Liste.Dann() Line wurde ausgeführt und wir lassen die JSON -Daten auf die Konsole gedruckt.

So ändern Sie die sequentielle Ausführung und implementieren asynchrone Ausführung

Abschluss

Asynchron Und erwarten Schlüsselwörter werden verwendet, um die asynchrone Ausführung des JavaScript -Code mit Hilfe von Versprechen zu implementieren. Asynchron Schlüsselwort, wenn sie vor der Deklaration einer Funktion verwendet werden, wandelt diese Funktion in eine um Asynchronisierungsfunktion und sein Rückgabetyp ändert sich zu einem Versprechen. Während erwarten ist ein Schlüsselwort, das darauf wartet, dass ein Versprechen in einem empfangen wird Asynchronisierungsfunktion. Asynchron/wartet Helfen Sie uns, Versprechen auf viel schönere und ordentliche Weise zu schreiben, die lesbarer und verständlicher ist.