JavaScript Asynchrone Programmierung

Das Konzept der Asynchronität

Asynchron (async) ist das gegenteilige Konzept von Synchron (sync).

In der traditionellen Single-Thread-Programmierung, die wir lernen, ist die Programmausführung synchron (synchron bedeutet nicht, dass alle Schritte gleichzeitig ausgeführt werden, sondern dass die Schritte nacheinander in einer Kontrollflusssequenz ausgeführt werden). Das Konzept der Asynchronität garantiert jedoch keine Synchronisation, was bedeutet, dass die Ausführung eines asynchronen Prozesses keine sequenzielle Beziehung zur ursprünglichen Reihenfolge mehr hat.

Einfach gesagt: Synchrone Ausführung folgt der Reihenfolge Ihres Codes, asynchrone Ausführung folgt nicht der Codereihenfolge, und asynchrone Ausführung ist effizienter.

Das Obige ist eine Erklärung des Konzepts der Asynchronität. Als Nächstes erklären wir Asynchronität in einfachen Worten: Asynchronität bedeutet, einen untergeordneten Thread vom Hauptthread aus zu starten, um eine Aufgabe zu erledigen.

Wann asynchrone Programmierung verwendet werden sollte

In der Frontend-Programmierung (und manchmal auch im Backend) können bei der Behandlung kurzer, schneller Operationen, wie der Berechnung des Ergebnisses von 1 + 1, diese oft im Hauptthread abgeschlossen werden. Als Thread kann der Hauptthread nicht mehrere Anfragen gleichzeitig annehmen. Wenn ein Ereignis daher noch nicht abgeschlossen ist, kann die Schnittstelle keine anderen Anfragen bearbeiten.

Betrachten wir nun eine Schaltfläche. Wenn wir ihr onclick-Ereignis auf eine Endlosschleife setzen, wird die gesamte Webseite unresponsiv, sobald die Schaltfläche gedrückt wird.

Um diese Situation zu vermeiden, verwenden wir häufig untergeordnete Threads, um Aufgaben zu bearbeiten, die lange genug dauern können, um vom Benutzer bemerkt zu werden, wie das Lesen einer großen Datei oder das Ausführen einer Netzwerkanfrage. Da ein untergeordneter Thread unabhängig vom Hauptthread ist, beeinträchtigt er den Betrieb des Hauptthreads auch dann nicht, wenn eine Blockierung auftritt. Untergeordnete Threads haben jedoch eine Einschränkung: Sobald sie erzeugt wurden, verlieren sie die Synchronisation mit dem Hauptthread, und wir können nicht bestimmen, wann sie fertig sind. Wenn nach ihrer Fertigstellung noch Dinge zu erledigen sind, wie die Verarbeitung von Informationen von einem Server, können wir sie nicht wieder in den Hauptthread einfügen.

Um dieses Problem zu lösen, verwenden asynchrone Operationsfunktionen in JavaScript häufig Callback-Funktionen, um die Ergebnisse asynchroner Aufgaben zu verarbeiten.

Callback-Funktionen

Eine Callback-Funktion ist eine Funktion, mit der wir beim Start einer asynchronen Aufgabe sagen: Was soll nach Abschluss dieser Aufgabe geschehen. Auf diese Weise muss sich der Hauptthread kaum um den Status der asynchronen Aufgabe kümmern; sie erledigt sich von Anfang bis Ende selbst.

Beispiele

function print() { document.getElementById("demo").innerHTML="BEISPIEL!"; } setTimeout(print, 3000);

Ausprobieren »

Das setTimeout in diesem Programm ist ein Prozess, der lange dauert (3 Sekunden). Der erste Parameter ist eine Callback-Funktion, und der zweite Parameter ist die Anzahl der Millisekunden. Nachdem diese Funktion ausgeführt wurde, erzeugt sie einen untergeordneten Thread. Der untergeordnete Thread wartet 3 Sekunden und führt dann die Callback-Funktion "print" aus, die "EXAMPLE!" auf der Kommandozeile ausgibt.

Natürlich ist die JavaScript-Syntax sehr freundlich. Wir müssen keine separate Funktion print definieren; wir schreiben das obige Programm oft als:

Beispiele

setTimeout(function () { document.getElementById("demo").innerHTML="EXAMPLE!"; }, 3000);

Ausprobieren »

Hinweis:Da setTimeout in einem untergeordneten Thread 3 Sekunden wartet, stoppt der Hauptthread nicht, nachdem die setTimeout-Funktion ausgeführt wurde, also:

Beispiele

setTimeout(function () { document.getElementById("demo1").innerHTML="EXAMPLE-1!"; //Der untergeordnete Thread wird nach drei Sekunden ausgeführt }, 3000); document.getElementById("demo2").innerHTML="EXAMPLE-2!"; //Der Hauptthread wird zuerst ausgeführt

Ausprobieren »

Das Ausführungsergebnis dieses Programms ist:

EXAMPLE-1!    // 三秒后子线程执行
EXAMPLE-2!    // 主线程先执行

Asynchrones AJAX

Neben der setTimeout-Funktion werden asynchrone Callbacks in der AJAX-Programmierung häufig verwendet. Einzelheiten zu AJAX finden Sie unter:https://www.example.com/ajax/ajax-tutorial.html

XMLHttpRequest wird oft verwendet, um XML- oder JSON-Daten von einem Remote-Server anzufordern. Ein Standard-XMLHttpRequest-Objekt enthält oft mehrere Callbacks:

Beispiele

var xhr = new XMLHttpRequest(); xhr.onload = function () { //Empfangene Textdaten ausgeben document.getElementById("demo").innerHTML=xhr.responseText; } xhr.onerror = function () { document.getElementById("demo").innerHTML="Anfragefehler"; } //Asynchrone GET-Anfrage senden xhr.open("GET", "https://www.example.com/try/ajax/ajax_info.txt", true); xhr.send();

Ausprobieren »

Die Eigenschaften onload und onerror von XMLHttpRequest sind beide Funktionen, die aufgerufen werden, wenn die Anfrage erfolgreich ist bzw. fehlschlägt. Wenn Sie die vollständige jQuery-Bibliothek verwenden, können Sie asynchrones AJAX eleganter nutzen:

Beispiele

$.get("https://www.example.com/try/ajax/demo_test.php",function(data,status){ alert("Data:" + data + "\nStatus:" + status); });

Ausprobieren »
Andere Erweiterungen