Lernen Einführung in Asynchrones JavaScript | Asynchrones JavaScript und API-Integration

Was ist asynchrones Programmieren?

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

Dies ist besonders im Web-Development entscheidend, wo Aufgaben wie das Abrufen von Daten aus einer API, das Warten auf Benutzereingaben oder das Setzen von Timern Zeit in Anspruch nehmen können.

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

Im synchronen Modell blockieren die Aufgaben 1 und 2 die Ausführung von 3, 4 und 5, bis sie abgeschlossen sind. Wenn beispielsweise ein Benutzer einen Kommentar postet (1) und anschließend versucht, eine Seitenleiste zu öffnen (3), friert die Benutzeroberfläche ein, bis der Kommentar verarbeitet wurde, 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 andere Aufgaben (3, 4 und 5) weiter aus. Dadurch kann der Benutzer unmittelbar nach dem Absenden des Kommentars mit der Seitenleiste interagieren, was die Reaktionsfähigkeit verbessert.

Unterschiede zwischen synchronem und asynchronem Verhalten

Synchrone Programmierung

Bei der synchronen Programmierung werden Aufgaben nacheinander ausgeführt. Jede Aufgabe muss abgeschlossen sein, bevor die nächste beginnt. Wenn eine Aufgabe viel Zeit in Anspruch nimmt (z. B. das Hochladen einer großen Datei), blockiert sie alle nachfolgenden Aufgaben, was die Anwendung unresponsiv 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 Aufgabe 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 gestartet und später ausgeführt werden, ohne anderen Code zu blockieren. Dadurch können andere Aufgaben fortgesetzt werden, während auf den Abschluss lang andauernder Operationen (z. B. Datenabruf) gewartet wird. Dies stellt sicher, dass Aufgaben wie Netzwerkabfragen oder Timer den Ablauf anderer Operationen in Ihrer Anwendung nicht unterbrechen.

index.html

index.css

index.js

In diesem Beispiel wird Aufgabe 1 sofort ausgeführt, Aufgabe 3 ebenfalls, 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.

Praxisbeispiele 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 restliche Code wird weiterhin ausgeführt, anstatt auf die Antwort des Servers zu warten. Sobald die Daten verfügbar sind, erfolgt die Verarbeitung mithilfe eines Callbacks oder Promises.

index.html

index.js

Synchroner Code: Der Absatz mit id="syncMessage" zeigt, dass synchroner Code unmittelbar nach dem Start des asynchronen Fetch-Vorgangs ausgeführt wird. Dies verdeutlicht, dass das Programm nicht anhält, während auf die API-Daten gewartet wird;
Asynchrones Fetch: Sobald die Daten abgerufen wurden, 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 nach einer Verzögerung oder in regelmäßigen Abständen auszuführen. Diese Funktionen blockieren die Ausführung anderer Codes nicht. Die von ihnen ausgelösten Aufgaben erfolgen nach einer festgelegten Verzögerung oder einem Intervall, während der restliche Code weiterhin ausgeführt wird.

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 Rückruf von setTimeout() abgeschlossen und der Absatz mit id="timerOutput" wird aktualisiert, um anzuzeigen, dass der Timer beendet ist.

Umgang mit Benutzereingabe-Ereignissen

JavaScript wartet asynchron auf das Eintreten von Ereignissen, ohne anderen Code zu blockieren, wenn Benutzerinteraktionen (wie Klicks, Formularübermittlungen oder Tastendrücke) verarbeitet werden. Ereignis-Listener sind nicht blockierend, sodass der Rest des Programms während des Wartens auf Benutzereingaben weiter ausgeführt werden kann.

index.html

index.js

Synchroner Code: Der Absatz mit id="syncMessage" zeigt, dass synchroner Code unmittelbar nach dem Einrichten des Event-Listeners ausgeführt wird. Es wird nicht darauf gewartet, dass der Benutzer auf die Schaltfläche klickt;
Asynchrone Ereignisbehandlung: Der Event-Listener der Schaltfläche 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

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain the main benefits of asynchronous programming?

What are some common use cases for asynchronous programming in web development?

How does asynchronous programming improve user experience?

Awesome!

Completion rate improved to 2.22

Swipe um das Menü anzuzeigen

Was ist asynchrones Programmieren?

Dies ist besonders im Web-Development entscheidend, wo Aufgaben wie das Abrufen von Daten aus einer API, das Warten auf Benutzereingaben oder das Setzen von Timern Zeit in Anspruch nehmen können.

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

Unterschiede zwischen synchronem und asynchronem Verhalten

Synchrone Programmierung


              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 Aufgabe 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

index.html

index.css

index.js

Praxisbeispiele für asynchrone Operationen

Abrufen von Daten von einer API

index.html

index.js

Synchroner Code: Der Absatz mit id="syncMessage" zeigt, dass synchroner Code unmittelbar nach dem Start des asynchronen Fetch-Vorgangs ausgeführt wird. Dies verdeutlicht, dass das Programm nicht anhält, während auf die API-Daten gewartet wird;
Asynchrones Fetch: Sobald die Daten abgerufen wurden, wird der Absatz mit id="apiOutput" aktualisiert, was den Abschluss der asynchronen Aufgabe demonstriert.

Timer (setTimeout und setInterval)

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 Rückruf von setTimeout() abgeschlossen und der Absatz mit id="timerOutput" wird aktualisiert, um anzuzeigen, dass der Timer beendet ist.

Umgang mit Benutzereingabe-Ereignissen

index.html

index.js

Synchroner Code: Der Absatz mit id="syncMessage" zeigt, dass synchroner Code unmittelbar nach dem Einrichten des Event-Listeners ausgeführt wird. Es wird nicht darauf gewartet, dass der Benutzer auf die Schaltfläche klickt;
Asynchrone Ereignisbehandlung: Der Event-Listener der Schaltfläche 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