Erfahren Sie, wie Sie mit JavaScript asynchrone Programme erstellen

Asynchrone Programmierung ist ein Grundpfeiler in der Softwareentwicklung. Kaum zu glauben, dass es dieses Programmierkonzept erst seit dem 21. Jahrhundert gibt. Die Programmiersprache F# war die erste ihrer Art, die 2007 die asynchrone Programmierung einführte.

Andere Sprachen wie C#, Python, JavaScript und C++ fügten nach und nach Unterstützung für asynchrone Programmierung hinzu. Die große Frage lautet: Welchen Mehrwert bringt die asynchrone Programmierung für Ihre Anwendungen?

Dieser Artikel beantwortet diese und andere Fragen, sodass Sie alles über die Verwendung der asynchronen Programmierung erfahren.

Was ist synchrone Programmierung?

Synchrone Programmierung bezieht sich auf ein Programm in seiner grundlegendsten Form. Dieses Programmiermodell verarbeitet die Codezeilen in einem Programm oder Skript sequentiell. Es beginnt immer mit der ersten Codezeile in einem Programm. Dann wartet es, bis jede Codezeile ihre Ausführung abgeschlossen hat, bevor es mit der nächsten fortfährt.

Das synchrone Modell enthält auch bedingten Code, wie z

wenn und während Aussagen. Obwohl nur ein Teil des Codes in einer bedingten Anweisung ausgeführt wird, wird das Programm dennoch sequentiell ausgeführt.

Beispiel für ein synchrones Programm

const SyncCode = () => {
 console.log("Dies ist die erste Zeile im Programm")
 console.log("Dies ist die zweite Zeile im Programm")
 console.log("Dies ist die letzte Zeile im Programm")
}
SyncCode();

Das Ausführen des obigen JavaScript-Programms erzeugt die folgende Ausgabe in der Konsole:

Dies ist die erste Zeile im Programm
Dies ist die zweite Zeile im Programm
Dies ist die letzte Zeile im Programm

Die obige Ausgabe ist genau das, was Sie erwarten sollten. Das Programm beginnt ganz oben und wartet, bis eine Codezeile beendet ist, bevor es zur nächsten übergeht.

Was ist asynchrone Programmierung?

Asynchrone Programmierung ist das Gegenteil von synchroner Programmierung. Das asynchrone Programmiermodell verarbeitet mehrere Codezeilen gleichzeitig. Es wartet nicht, bis die vorherige Codezeile in einem Programm ihre Ausführung abgeschlossen hat, bevor es zur nächsten übergeht.

Verwandt: Synchron vs. Asynchrone Programmierung: Wie unterscheiden sie sich?

Durch asynchrone Programmierung kann die Ausführungszeit halbiert werden, wodurch effektiv schnellere Computer entstehen.

Beispiel für ein asynchrones Programm

const AsyncCode = () => {
 console.log("Dies ist die erste Zeile im Programm")
 setTimeout(() => {
 console.log("Dies ist die zweite Zeile im Programm")
 }, 3000)
 console.log("Dies ist die letzte Zeile im Programm")
}
AsyncCode();

Das Ausführen des obigen JavaScript-Codes erzeugt die folgende Ausgabe in Ihrer Konsole:

Dies ist die erste Zeile im Programm
Dies ist die letzte Zeile im Programm
Dies ist die zweite Zeile im Programm

Wenn Sie die obige Konsolenausgabe mit dem asynchronen Programm vergleichen, das sie generiert, werden Sie feststellen, dass es eine offensichtliche Diskrepanz gibt. Der Aufruf an Protokoll der sagt „Dies ist die zweite Zeile im Programm“ vor dem steht, der sagt „Das ist die letzte Zeile im Programm“. Die Konsolenausgabe spiegelt dies jedoch nicht wider.

Da JavaScript hauptsächlich synchron ist, wurde der Code im obigen Programm sequentiell ausgeführt. JavaScript unterstützt jedoch die asynchrone Programmierung über Funktionen wie die setTimeout() Methode.

Die setTimeout() -Methode ist eine asynchrone JavaScript-Methode, die zwei Argumente akzeptiert: eine Funktion und eine Verzögerung. Die Verzögerung ist ein Timer (in Millisekunden), der die Ausführung der Funktion verzögert. Während also das obige Programm auf die drei Sekunden wartet, um die Funktion in der auszuführen setTimeout() -Methode geht es zur nächsten Zeile im Code über. Dies führt dazu, dass der dritte Funktionsaufruf vor dem zweiten ausgeführt wird.

Asynchrone JavaScript-Technologien

Neben dem setTimeout() oben genannten Methode verwenden mehrere JavaScript-Technologien asynchrone Programmierung. Diese Technologien verwenden das asynchrone Programmiermodell, um schnellere, nicht blockierende Anwendungen zu entwickeln. Einige dieser Technologien umfassen:

• jQuery Ajax
• Axios
• NodeJS

Verwandt: Was ist Node.js? So verwenden Sie serverseitiges JavaScript

Asynchrone Programme mit JavaScript erstellen

Es gibt mehrere Möglichkeiten, mit asynchronem Code umzugehen. Welche Methode Sie wählen, sollte von der Art der Anwendung abhängen, die Sie entwickeln möchten. Zu diesen Methoden gehören Callback-Funktionen, Promises und Async/await.

Callback-Funktionen

Es gibt zwei wichtige Eigenschaften einer Callback-Funktion. Sie dienen als Parameter für andere Funktionen und verlassen sich auf externe Ereignisse, um ihre Pflicht zu erfüllen. Die setTimeout() Die im obigen asynchronen Beispiel verwendete Methode ist eine Callback-Funktion. Das Programm übergibt ihm eine Log-Funktion als Parameter (die Callback-Funktion) und führt sie erst nach drei Sekunden aus (das Event).

Callback-Funktionen eignen sich hervorragend für kleine Programme, aber wenn Ihre Anwendungen wachsen, können sie sehr schnell zu kompliziert werden. Dies liegt daran, dass Callback-Funktionen häufig andere Callback-Funktionen aufrufen und so eine Kette verschachtelter Callbacks erstellen.

Versprechen verwenden

JavaScript hat Unterstützung für Promises nach Callback-Funktionen hinzugefügt. Sie sind eine gute Alternative bei der Erstellung größerer Anwendungen. Ein Promise stellt dar, was nach einer asynchronen Operation passieren könnte. Dieses potenzielle Ergebnis wird eine von zwei Formen annehmen: behoben oder abgelehnt. Jedes dieser Ergebnisse wird von einer separaten Funktion verarbeitet, sodass keine Verschachtelung erforderlich ist (das Problem der Callback-Funktion). Stattdessen ermutigen Versprechen Kettenfunktionen, die einfacher zu verwenden sind.

Jedes Versprechen beginnt mit einem neuen Versprechen Objekt, das eine anonyme Funktion mit der hat beschließen und ablehnen Parameter. Innerhalb dieser Funktion haben Sie die asynchrone Anwendung, die eine Auflösung zurückgibt, wenn die asynchrone Operation erfolgreich ist, oder andernfalls eine Ablehnung.

Die dann() Kettenfunktion behandelt die beschließen Funktion und die fangen() Kettenfunktion behandelt die ablehnen Funktion. Es sind also keine verschachtelten if-Anweisungen erforderlich, wie dies bei Callback-Funktionen der Fall ist.

Beispiel für die Verwendung von Promises

const PromiseFunction = () => {
 return new Promise((auflösen, ablehnen) => {
 setTimeout(() => {
 resolve("diese asynchrone Operation wurde gut ausgeführt")
 }, 3000)
 })
}
PromiseFunction().then((Ergebnis) => {
 console.log("Erfolg", Ergebnis)
}).catch((Fehler) => {
 console.log("Fehler", Fehler)
})

Der obige Code gibt die folgende Ausgabe in der Konsole zurück:

Erfolg, diese asynchrone Operation wurde gut ausgeführt

Dies liegt daran, dass das Versprechen das zurückgibt beschließen Funktion, die ihre Ergebnisse an die übergibt dann() Funktion. Wenn das Versprechen zurückkehrt ablehnen Funktion, die das Programm verwendet fangen funktionieren stattdessen.

Verwenden von Async/Await

Wenn Sie beim Umgang mit asynchronen Vorgängen keine Versprechungskette erstellen möchten, können Sie es mit async/await versuchen. Async/await ist kein völlig anderes asynchrones Tool als Promises, sondern nur eine andere Art, mit ihnen umzugehen. Es verarbeitet Versprechungen, ohne die Kettenmethode zu verwenden. So wie Promises asynchrone Operationen besser handhaben als Callback-Funktionen, hat async/await Vorteile gegenüber einfachen Promises.

Es gibt zwei Schlüsselattribute jeder async/await-Funktion. Sie beginnen mit der asynchron Stichwort und die erwarten Schlüsselwort wartet auf das Ergebnis einer asynchronen Operation.

Beispiel für ein Async/Await-Programm

const PromiseFunction = () => {
 return new Promise((auflösen, ablehnen) => {
 setTimeout(() => {
 resolve("diese asynchrone Operation wurde gut ausgeführt")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 konstantes Ergebnis = warte auf PromiseFunction ();
 console.log (Ergebnis);
}
AsyncAwaitFunc();

Der obige Code gibt die folgende Ausgabe in der Konsole zurück:

Diese asynchrone Operation wurde gut ausgeführt

Was sind die wichtigsten Imbissbuden?

Es gibt mehrere wichtige Punkte, die Sie aus diesem Artikel entnehmen sollten:

• Asynchrone Programmierung ist wertvoll, weil sie die Wartezeit eines Programms reduziert und schnellere Anwendungen erstellt.
• Eine Callback-Funktion kann synchron oder asynchron sein.
• Promises bieten eine bessere Möglichkeit, asynchrone Vorgänge zu handhaben als Callback-Funktionen.
• Async/await-Funktionen verarbeiten Versprechungen besser als die Verwendung von Kettenfunktionen.
• Eine async/await-Funktion verarbeitet asynchrone Vorgänge auf eine Weise, die synchron aussieht, was das Verständnis erleichtert.
• Pfeilfunktionen helfen Ihnen, besseren Code zu schreiben.

JavaScript-Pfeilfunktionen können Sie zu einem besseren Entwickler machen

Möchten Sie besser in der Webentwicklung werden? Pfeilfunktionen, die zu JavaScript ES6 hinzugefügt wurden, bieten Ihnen zwei Möglichkeiten, Funktionen für Web-Apps zu erstellen.

Lesen Sie weiter

Über den Autor