Einführung in Asynchrones JavaScript

Was ist Asynchrones Programmieren?

Asynchrones Programmieren ermöglicht es Ihrem Code, nicht-blockierende Operationen auszuführen. Im Gegensatz zum synchronen Programmieren, bei dem jede Operation darauf wartet, dass die vorherige abgeschlossen ist, bevor sie fortfährt, erlaubt das asynchrone Programmieren anderen Aufgaben, fortzufahren, ohne auf den Abschluss einer vorherigen Aufgabe zu warten.

Dies ist entscheidend in der Webentwicklung, wo Sie möglicherweise Aufgaben ausführen müssen, die Zeit in Anspruch nehmen, wie das Abrufen von Daten von einer API, das Warten auf Benutzereingaben oder das Setzen von Timern.

Stellen Sie sich vor, wir entwickeln ein Programm, bei dem 1 und 2 Serveranfragen sind und 3, 4 und 5 andere Operationen wie die Handhabung von Benutzerinteraktionen sind.

Im synchronen Modell blockieren die Aufgaben 1 und 2 die Ausführung von 3, 4 und 5, bis sie abgeschlossen sind. Wenn ein Benutzer beispielsweise einen Kommentar postet (1) und dann versucht, eine Seitenleiste zu öffnen (3), friert die Benutzeroberfläche ein, bis der Kommentar verarbeitet ist, was zu Verzögerungen führt.

Im asynchronen Modell blockieren Serveranfragen (1 und 2) das Programm nicht. Während auf eine Antwort gewartet wird, fährt das Programm mit anderen Aufgaben (3, 4 und 5) fort. Dies ermöglicht es dem Benutzer, sofort nach dem Posten des Kommentars mit der Seitenleiste zu interagieren, was die Reaktionsfähigkeit verbessert.

Unterschiede zwischen synchronem und asynchronem Verhalten

Synchrone Programmierung

In der synchronen Programmierung werden Aufgaben nacheinander ausgeführt. Jede Aufgabe muss abgeschlossen sein, bevor die nächste beginnt. Wenn eine Aufgabe lange dauert (z.B. ein großer Datei-Upload), blockiert sie alle nachfolgenden Aufgaben, was die Anwendung unempfindlich machen kann.


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

In diesem Beispiel wird Task 2 erst ausgeführt, nachdem die lang andauernde Aufgabe (die Schleife) abgeschlossen ist. Dies blockiert die Codeausführung und kann den Browser einfrieren.

Asynchrones Programmieren

Beim asynchronen Programmieren können Aufgaben initiiert und dann später ausgeführt werden, ohne dass anderer Code blockiert wird. Dies ermöglicht es anderen Aufgaben, fortzufahren, während auf den Abschluss von lang andauernden Operationen (z. B. Datenabruf) gewartet wird. Es stellt sicher, dass Aufgaben wie Netzwerkabfragen oder Timer den Ablauf anderer Operationen Ihrer Anwendung nicht stoppen.

index.html

index.css

index.js

In diesem Beispiel läuft Aufgabe 1 sofort, Aufgabe 3 läuft ebenfalls sofort und Aufgabe 2 wird nach 2 Sekunden ausgeführt. Asynchrones Verhalten ermöglicht es dem Programm, fortzufahren, ohne auf den Abschluss von Aufgabe 2 zu warten.

Beispiele aus der Praxis für asynchrone Operationen

Abrufen von Daten von einer API

Eine der häufigsten asynchronen Operationen in JavaScript ist das Abrufen von Daten von einem entfernten Server über APIs. JavaScript fordert Daten von einer API an, aber der Rest des Codes wird weiterhin ausgeführt, anstatt auf die Antwort des Servers zu warten. Sobald die Daten verfügbar sind, werden sie mit einem Callback oder Promise verarbeitet.

index.html

index.js

Synchroner Code: Der Absatz mit id="syncMessage" zeigt, dass synchroner Code unmittelbar nach dem Start des asynchronen Abrufs ausgeführt wird. Er zeigt, dass das Programm nicht pausiert, während es auf die API-Daten wartet;
Asynchroner Abruf: Sobald die Daten abgerufen sind, wird der Absatz mit id="apiOutput" aktualisiert, was den Abschluss der asynchronen Aufgabe demonstriert.

Timer (setTimeout und setInterval)

JavaScripts setTimeout() und setInterval() werden häufig verwendet, um Aufgaben zu planen, die nach einer Verzögerung oder in regelmäßigen Abständen ausgeführt werden sollen. Diese Funktionen blockieren nicht die Ausführung anderer Codes. Die von ihnen ausgelösten Aufgaben treten nach einer bestimmten Verzögerung oder einem bestimmten Intervall auf, während der Rest des Codes weiterläuft.

index.html

index.js

Synchroner Code: Der Absatz mit id="syncMessage" wird sofort aktualisiert, was zeigt, dass der synchrone Teil des Codes ohne Warten auf den Timer ausgeführt wird;
Asynchroner Timer: Nach 3 Sekunden wird der setTimeout()-Callback abgeschlossen und aktualisiert den Absatz id="timerOutput", um zu zeigen, dass der Timer beendet ist.

Umgang mit Benutzereingabeereignissen

JavaScript wartet asynchron auf das Auftreten von Ereignissen, ohne anderen Code zu blockieren, wenn es um Benutzerinteraktionen geht (wie Klicks, Formularübermittlungen oder Tastendrücke). Ereignislistener sind nicht blockierend, was bedeutet, dass der Rest des Programms weiter ausgeführt werden kann, während auf Benutzereingaben gewartet wird.

index.html

index.js

Synchroner Code: Der Absatz mit id="syncMessage" zeigt, dass synchroner Code unmittelbar nach dem Einrichten des Ereignislisteners ausgeführt wird. Er wartet nicht darauf, dass der Benutzer den Button klickt;
Asynchrone Ereignisbehandlung: Der Ereignislistener des Buttons wird ausgelöst, wenn der Benutzer klickt und aktualisiert den Absatz mit id="eventOutput".

War alles klar?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 1