In der modernen Programmierung, insbesondere bei der Arbeit mit Webanwendungen, ist es wichtig, mit asynchronem Code effizient arbeiten zu können. Asynchronität ermöglicht das parallele Ausführen von Aufgaben, wodurch die Leistung und Reaktionsfähigkeit der Anwendung verbessert wird. Eines der wichtigsten Werkzeuge für die Arbeit mit Asynchronität in JavaScript sind asynchrone Funktionen.
Eine asynchrone Funktion ist eine Funktion, die asynchron aufgerufen und im Hintergrund ausgeführt werden kann, ohne den Hauptausführungsthread zu blockieren. Um eine asynchrone Funktion in JavaScript zu erstellen, müssen wir ein Schlüsselwort verwenden async vor der Funktionsdeklaration.
Die Arbeit mit asynchronen Funktionen kann schwierig sein, besonders wenn Sie Würstchen oder Promis verwenden. Jedoch mit dem Aufkommen der Syntax async/await in ECMAScript 2017 ist die Arbeit mit asynchronem Code in JavaScript wesentlich bequemer geworden.
In diesem ausführlichen Tutorial werden wir untersuchen, was asynchrone Funktionen sind, wie die async/Await-Syntax funktioniert und wie sie richtig verwendet werden können, um asynchronen Code in JavaScript effizient zu verarbeiten. Beginnen wir mit einem einfachen Beispiel und gehen wir schrittweise zu komplexeren Beispielen und Anwendungsszenarien über.
Wie erstelle ich eine asynchrone Funktion in JavaScript
In JavaScript ermöglichen asynchrone Funktionen das Ausführen von Operationen, die viel Zeit in Anspruch nehmen, ohne den Hauptausführungsthread zu blockieren. Dies ist besonders nützlich, wenn Sie Anforderungen an den Server, Dateioperationen oder andere lange Vorgänge ausführen müssen, die Ihre Anwendung verlangsamen können.
Sie können ein Schlüsselwort verwenden, um eine asynchrone Funktion in JavaScript zu erstellen async. Zum Beispiel:
async function fetchData() Stichwort async vor der Funktion gibt an, dass sie asynchron ausgeführt wird. Es erlaubt Ihnen auch, ein anderes Schlüsselwort zu verwenden - await.
Stichwort await wird innerhalb einer asynchronen Funktion verwendet und gibt an, dass Sie warten müssen, bis die Promis abgeschlossen sind (ein Objekt, das einen Wert darstellt, auf den zugegriffen werden kann jetzt, später oder niemals), bevor die Funktion fortgesetzt wird. Zum Beispiel:
async function fetchData() In diesem Beispiel verwenden wir das Schlüsselwort await warten, bis die Funktion abgeschlossen ist fetch, die eine Anforderung an die angegebene URL ausführt. Dann verwenden wir das Schlüsselwort await warten, bis die Antwort im JSON-Format konvertiert wird.
Mit asynchronen Funktionen in JavaScript können Sie durch die Verwendung von Schlüsselwörtern klareren und benutzerfreundlicheren Code schreiben async und await. Sie machen den Code linearer und vereinfachen die Verarbeitung asynchroner Operationen.
Arbeiten mit async/await
Stichwort async ermöglicht das Deklarieren einer Funktion als asynchron. Dies bedeutet, dass innerhalb dieser Funktion ein anderes Schlüsselwort verwendet werden kann await gibt an, dass Sie warten müssen, bis der asynchrone Vorgang abgeschlossen ist, bevor Sie mit der Codeausführung fortfahren.
Syntax der Verwendung await sieht wie folgt aus:
async function getData() Im obigen Beispiel ist die Funktion getData() mit einem Schlüsselwort deklariert async. Innerhalb dieser Funktion haben wir verwendet await warten auf Daten, die von einer asynchronen Anforderung an den Server empfangen werden. Dann konvertieren wir die Serverantwort mithilfe einer Methode in das JSON-Format json() und wir geben die erhaltenen Daten zurück.
Jetzt können wir die Funktion aufrufen getData() und Daten synchron abrufen:
async function main() catch (error) >main();Im obigen Beispiel ist die Funktion main() auch mit einem Stichwort deklariert async. Wir können das Schlüsselwort verwenden await warten, bis die Funktion beendet ist getData() und Daten zu erhalten. Wenn ein Fehler auftritt, behandeln wir ihn mit einem Block try. catch.
Daher ist die Verwendung von Schlüsselwörtern async und await ermöglicht das Schreiben von asynchronem Code in einer einfacheren und verständlicheren Form, wodurch es einfacher zu lesen und zu debuggen ist.
Verwenden von Promis für asynchrone Funktionen
Promis können verwendet werden, um eine normale Funktion in eine asynchrone Funktion umzuwandeln. Dazu wird normalerweise ein Promis-Konstruktor verwendet, der eine Handlerfunktion (auch Executor genannt) annimmt. Innerhalb dieses Handlers können Sie asynchrone Operationen ausführen und die Promis entsprechend dem Ergebnis der Operationen auflösen oder neu ausrichten.
Betrachten wir ein Beispiel, in dem wir Promis für eine asynchrone Funktion verwenden:
In diesem Beispiel erstellen wir eine neue Promis mit dem Promise-Konstruktor. Innerhalb der Handlerfunktion führen wir eine asynchrone Operation mit der setTimeout-Funktion durch, die die Ausführung um 2 Sekunden verzögert. Danach werden wir die Promis mit dem Ergebnis "Task is done!".
Dann rufen wir diese asynchrone Funktion auf und klammern die Handler mit den then- und catch-Methoden ein. Die then-Methode akzeptiert eine Funktion, die mit dem Ergebnis der Promis aufgerufen wird, wenn sie aufgelöst wird. Die catch-Methode akzeptiert eine Funktion, die aufgerufen wird, wenn die Promis neu definiert werden.
Die Verwendung von Promis erleichtert das Arbeiten mit asynchronen Vorgängen, wodurch der Code verständlicher und lesbarer wird. Sie bieten auch eine flexiblere Fehlerbehandlung im asynchronen Code.
