JavaScript: Asynchrone Programmierung

Kontrollfluss

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der reguläre Kontrollfluss bei asynchronen Vorgängen ist auf Basis von Callback-Semantik nur schwer abzubilden.

Transkript

Der Kontrollfluss einer Anwendung ist idealerweise einfach strukturiert und für jeden verständlich. Doch gerade wenn wir mit Callbacks arbeiten, kann unsere Anwendungslogik schnell aus dem Ruder laufen. In diesem Video demonstriere ich Ihnen daher die Steuerung des Kontrollflusses auf Basis von Callbacks. Ich beginne nun also zunächst damit eine Datei anzulegen mit der Bezeichnung: 02_control_flow.js. Zusätzlich benötige ich das Paket request, mit dem ich Abfragen ins Internet senden kann. Dazu verwende ich die Syntax npm install, minus, minus, save, und request. NodeJS lädt nun also das JavaScript Paket herunter, und ich kann es in meinem Projekt verwenden. Mein Ziel ist es nun also, diese API, hier auf der Seite www.httpbin.org/get?req=1 abzufragen. Das Schöne an der API ist, dass ich automatisch ein JSON Objekt zurückbekomme. Dieses wird übrigens so gut dargestellt, da ich die Chrome Erweiterung JSON View verwende. Mit Hilfe der URL kann ich die Rückgabewerte dieser API steuern. Beispielsweise kann ich statt request1, in args, mir auch request2 zurückgeben lassen. Zunächst einmal muss ich nun also die Bibliothek request importieren. Mit Hilfe der Variable request und dem Aufruf von require, auf die Bibliothek request. Auf request kann ich nun eine URL übergeben, und einen Callback, der mir das Resultat liefert. Dieser hat die Argumente des möglichen Fehlers, des jeweiligen http response Objektes, und des body, also dem Inhalt der Seite. Ich platziere also noch die korrekte URL, und nutze nun die Funktion JSON.parse, auf dem body, um dort auf args, in request zu extrahieren. Diesen gebe ich noch auf die Konsole aus, und erwarte nun den Wert 1. Das Ganze kann ich nun beliebig oft schachteln, um die requests nacheinander auszuführen, beispielsweise, für Nummer 2, als auch für Nummer 3. Alle laufen immer strikt nach der selben Reihenfolge ab, da sie darauf warten, dass das erste Resultat bereits heruntergeladen wurde. Allerdings findet hier nie ein paralleler Abruf der jeweiligen APIs statt. Um das Ganze nun etwas übersichtlicher zu gestalten, kann ich mir eine Standardfunktion anlegen, mit der Bezeichnung printRequest, diese nimmt den body entgegen, und gibt ihn auf die Konsole aus. Außerdem kann ich nun mit Hilfe der Funktion request, und der URL, als auch unserer Callback Funktion printRequest, alle Abfragen an den Server parallel starten. Also in meinem Beispiel nun für 1, 2, und 3. Die Reihenfolge muss nun nicht mehr zwangsläufig stimmen. Das bedeutet nun, wenn ich den oberen Aufruf auskommentiere, und die Anwendung starte, kann es sein, dass die Reihenfolge wie der Server auf meine Anfragen antwortet, nicht mehr zwangsläufig 1,2, 3 ist, sondern unter Umständen auch 3, 1, 2. Wenn ich mir es aber zum Ziel mache, auch hier die Reihenfolge zu garantieren, trotz paralleler Anfragen, wird es schnell sehr kompliziert. Beispielsweise könnte ich nun alle URLs innerhalb eines arrays ablegen, beispielsweise hier mit request1, und request2, und, zu guter Letzt, request3. Als nächstes definiere ich noch hier einen Zwischenspeicher, das sogenannte result Objekt. Innerhalb meiner Callback Funktion printRequest, habe ich nun Zugriff auf die aufgerufene URL. über this.href. Nach dem Empfangen, kann ich mit result, und der property currentURL, die Ausgabe innerhalb des Objektes sichern. Nun gilt es zu prüfen, ob die Anzahl der keys auf dem Objekt result, wie in meinem Fall nun die Länge 3 hat. Wenn das also der Fall ist, kann ich nun für jede URL in der Liste, für die bestimmte Reihenfolge, auf die Konsole, den jeweiligen Wert ausgeben. Das bedeutet also, dass alle Resultate bereits vorhanden sind und ich nun beim letzten Aufruf von printRequest, nur noch durch die Liste aller URLs durchgehe, und sie auf die Konsole ausgebe und hier die Reihenfolge beibehalte. Für diese Art von Problemen gibt es nun tausende mögliche Lösungen, wobei jedes dieser Konstrukte mit seitenbehafteten Objekten arbeiten muss. Indem man sofern bei der klassischen Callback API bleibt. Der Kontrollfluss der Anwendung ist also hier, durch diese Nebeneffekte, nicht immer 100%ig garantiert. Auffällig war in diesem Beispiel nun also, dass bei geschachtelter Ausführung, ein gesteuerter Kontrollfluss stattfinden kann. Sobald man eine parallele Ausführung startet, verliert man die Kontrolle zu welchem Zeitpunkt, welche Daten zur Verfügung stehen. Die Steuerung der Reihenfolge ist dann nur noch mit unsicheren StateVariablen möglich und daher mit äußerster Vorsicht zu genießen.

JavaScript: Asynchrone Programmierung

Lernen Sie Lösungen für die komplexe Anwendungsentwicklung kennen, um zeitaufwändige Ressourcenzugriife im Code zu vermeiden.

2 Std. 30 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:22.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!