© Matej Kotula/Shutterstock.com
Wie Sie jetzt schon Async Functions in Ihrem Code implementieren

Asynchrones JavaScript


Asynchronität in JavaScript-Applikationen sorgt häufig für Kopfzerbrechen bei Entwicklern. Der Lesefluss des Quellcodes wird unterbrochen. Die Verständlichkeit leidet. Spätestens wenn Abhängigkeiten zwischen mehreren asynchronen Operationen ins Spiel kommen, benötigen Sie Werkzeuge, die Ihnen bei der Lösung Ihrer Probleme helfen. Im Verlauf dieses Artikels lernen Sie verschiedene Strategien zum Umgang mit asynchronen Operationen und der asynchronen Flusssteuerung kennen. Außerdem wagen wir einen Blick in die Zukunft.

Bevor Sie sich in die Behandlung asynchroner Programmabläufe stürzen, sollten Sie zunächst verstehen, was Asynchronität bedeutet, welche Probleme Sie damit lösen können und welche Herausforderungen sich daraus ergeben. Beginnen wir mit einem Beispiel, um die Problemstellung etwas besser zu verdeutlichen. Bestimmt kennen Sie das XMLHttpRequest-Objekt Ihres Browsers, mit dem Sie aus Ihrer Frontend-Applikation heraus asynchrone Anfragen an einen Webserver erstellen können. Diese Methode ist besser unter dem Namen Ajax bekannt. Das wichtigste Merkmal von Ajax versteckt sich hinter dem ersten Buchstaben dieses Akronyms. Dieser steht für asynchronous. Sie formulieren die Anfrage an den Server und registrieren eine oder mehrere Callback-Funktionen, die das Ergebnis dann behandeln sollen. Danach wird die Anfrage abgesendet und Ihre Applikation läuft ganz normal weiter und kann mit Eingaben des Benutzers umgehen. Sobald die Antwort des Servers vorliegt, werden die entsprechenden Callback-Funktionen ausgeführt. Während des gesamten Vorgangs ist Ihre Applikation weiterhin responsiv, die Anfrage an den Server blockiert also nichts in Ihrer Applikation.

Sie haben natürlich auch die Möglichkeit, einen solchen XMLHttpRequest, auch bekannt als XHR, synchron abzusetzen. Dann wartet Ihr Browser jedoch auf die Antwort des Servers und führt kein weiteres JavaScript in der Zwischenzeit aus. Ihre Applikation ist in diesem Fall blockiert.

Der Event-Loop

Asynchronität ist stark mit Ereignissen verbunden. Das Konzept lässt sich recht einfach erklären: Wenn Sie eine Callback-Funktion registrieren, wird sie in eine Warteschlange eingereiht. Sobald dann die Bedingung eintritt, für die die Callback-Funktion registriert wurde, wird sie ausgeführt. Um die korrekte Abarbeitung dieser Warteschlange kümmert sich der Event-Loop des Browsers. Er sorgt dafür, dass alle Callback-Funktionen bis zu ihrem Ende abgearbeitet werden.

In JavaScript sehen Sie sich wesentlich häufiger mi...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang