Verwenden von Async/Warte in JavaScript mit Beispielen

Async/Auseait ist ein Merkmal von JavaScript, mit dem Entwickler asynchroner Code auf synchron aussehende Weise schreiben können. Mit Async/Assait können Entwickler Code schreiben, der darauf wartet, dass eine asynchrone Operation abgeschlossen ist, ohne den Hauptausführungsthread zu blockieren.

In diesem Artikel werden wir untersuchen, wie Async/Warte in Javascript mit einigen Beispielen verwendet werden.

Syntax von Async/Warted

Die Syntax von asynchron/wartet ist ziemlich einfach. Um eine asynchrone Funktion zu definieren, fügen Sie das asynchrische Schlüsselwort vor dem Schlüsselwort wie folgt hinzu:

Async -Funktion getData () // Async Code geht hier

123	Async -Funktion getData () // Async Code geht hier

In der asynchron Funktion, Sie können das Keyword erwarten, um zu warten, bis ein Lösungsversprechen wie diese gelöst werden kann:

Async -Funktion getData () const response = warte auf fetch ('https: // api.Beispiel.com/data '); const data = erwarten.JSON (); Daten zurückgeben;

12345

Async -Funktion getData () const response = warte auf fetch ('https: // api.Beispiel.com/data '); const data = erwarten.JSON (); Daten zurückgeben;

In diesem Beispiel verwenden wir die Fetch -Funktion, um eine HTTP -Anforderung zu erstellen, und dann das Keyword erwartet, um zu warten, bis die Antwort zurückgegeben wird. Anschließend verwenden wir das Keyword erneut, um darauf zu warten, dass die JSON -Daten vor der Rückgabe analysiert werden.

Beispiel: Daten aus einer API mit Async/Auseait abrufen

Schauen wir uns genauer an, wie man Async/wartet, um Daten von einer API abzurufen. In diesem Beispiel werden wir die Fetch -Funktion verwenden, um eine HTTP -Anforderung an die Github -API zu stellen, und dann Async/Assait verwenden, um zu warten, bis die Antwort zurückgegeben wird.

Async -Funktion Fetchgithubuser (Benutzername) const url = 'https: // api.Github.com/user/$ userername '; const response = wartet avetch (URL); const data = erwarten.JSON (); Daten zurückgeben; fetchgithubuser ('Octocat') .Dann (Data => Konsole.Logdaten)) .catch (Fehler => Konsole.Fehler (Fehler));

12345678910

Async -Funktion Fetchgithubuser (Benutzername) const url = 'https: // api.Github.com/user/$ userername '; const response = wartet avetch (URL); const data = erwarten.JSON (); Daten zurückgeben; Fetchgithubuser ('Octocat') .Dann (Data => Konsole.Logdaten)) .catch (Fehler => Konsole.Fehler (Fehler));

In diesem Beispiel definieren wir eine asynchrische Funktion genannt Fetchgithubuser Das braucht einen Github -Benutzernamen als Parameter. In der Funktion konstruieren wir die URL für die API. Anschließend verwenden wir das Keyword erneut, um darauf zu warten, dass die JSON -Daten vor der Rückgabe analysiert werden.

Um die asynchronisierte Funktion aufzurufen, verwenden wir die Standard -Versprechen -Syntax mit a .Dann() Methode, um den Erfolgsfall zu bewältigen und a .fangen() Methode zur Behandlung von Fehlern.

Beispiel: Verwenden von Versprechen mit Asynchronisation/wartet

Manchmal müssen Sie möglicherweise Versprechungen mit Asynchronisation verwenden/warten. In diesem Beispiel werden wir die verwenden Versprechen.alle() Methode zur parallelen API.

Async -Funktion FetchgithubData () const urls = ['https: // api.Github.com/user/octocat ',' https: // api.Github.com/user/mojombo ',' https: // api.Github.com/user/defunkt ']; const verspricht = URLs.map (url => fetch (url)); const antworten = warte versprechen.alle (Versprechen); const data = wartet versprechen.alle (Antworten.MAP (Antwort => Antwort.JSON ())); Daten zurückgeben; fetchgithubdata ()) .Dann (Data => Konsole.Logdaten)) .catch (Fehler => Konsole.Fehler (Fehler));

1234567891011121314151617

Async -Funktion FetchgithubData () const urls = ['https: // api.Github.com/user/octocat ',' https: // api.Github.com/user/mojombo ',' https: // api.Github.com/user/defunkt ']; const verspricht = URLs.map (url => fetch (url)); const antworten = warte versprechen.alle (Versprechen); const data = wartet versprechen.alle (Antworten.MAP (Antwort => Antwort.JSON ())); Daten zurückgeben; fetchgithubdata () .Dann (Data => Konsole.Logdaten)) .catch (Fehler => Konsole.Fehler (Fehler));

In diesem Beispiel definieren wir eine asynchrische Funktion genannt fetchgithubdata Das konstruiert eine Reihe von API -Anforderungs -URLs und verwendet dann die Karte() Methode zum Erstellen einer Reihe von Versprechen, die die Daten von jeder URL abrufen. Wir verwenden dann die Versprechen.alle() Methode, um auf alle Anforderungen zu warten, bevor Sie fortfahren.

Nachdem wir alle Antworten erhalten haben, verwenden wir die Karte() Methode, um eine Reihe von Versprechen zu erstellen, die die JSON -Daten aus jeder Antwort analysieren. Anschließend verwenden wir das Keyword erneut, um auf alle diese Versprechen zu warten, bevor wir die Daten als Array von Objekten zurückgeben.

Best Practices für die Verwendung von Async/Warten

Hier sind einige Best Practices für die Verwendung von Async/Auseait in Ihrem JavaScript -Code:

• Immer mit Fehlern umgehen: Asynchroner Code kann anfällig für Fehler sein. Daher ist es wichtig, sie immer richtig zu handhaben. Sie können verwenden versuche/fangen Blöcke, um Fehler innerhalb einer asynchronen Funktion zu fangen, oder Sie können die verwenden .fangen() Methode für ein Versprechen, Fehler im Anrufcode zu behandeln.
• Asynchronisation nicht zu übernehmen/wartet: Async/wartet können asynchronen Code leichter zu lesen und zu schreiben, aber er ist nicht immer erforderlich oder angemessen. Verwenden Sie nur Async/Warten, wenn Sie warten müssen, um ein Versprechen zu lösen, bevor Sie fortfahren.
• Versprechen verwenden.All () für parallele Anfragen: Wenn Sie parallel mehrere API -Anfragen stellen müssen, verwenden Sie die Versprechen.alle() Methode, um auf alle Anforderungen zu warten, bevor Sie fortfahren.
• Blockieren Sie den Hauptfaden nicht: Denken Sie daran, dass asynchroner Code im Hintergrund ausgeführt werden soll. Vermeiden Sie es daher, den Hauptausgangsfaden zu blockieren. Wenn Ihr Code lange ausgeführt wird, sollten Sie einen Webarbeiter verwenden, um ihn im Hintergrund auszuführen.
• Halten Sie die Funktionen klein und fokussiert: Wie bei jeder Funktion ist es wichtig, die asynchronen Funktionen klein und fokussiert zu halten. Wenn eine Funktion zu viel funktioniert, sollten Sie sie in kleinere, fokussiertere Funktionen zerlegen.

Abschluss

Async/Auseait ist ein leistungsstarkes Merkmal von JavaScript, das asynchronen Code leichter zu lesen und zu schreiben kann. Wenn Sie das Keyword verwenden, um auf die Lösung von Versprechen zu warten. Denken Sie nur daran, Fehler richtig zu behandeln. Verwenden Sie Promise.Alle () für parallele Anfragen und vermeiden Sie es, den Hauptausgangsfaden zu blockieren.