Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript: Asynchrone Programmierung

Asynchrone Generatoren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auf Basis von Generatoren lässt sich ein asynchroner Ablauf in synchronem Code beschreiben. Diese Konvention ist Basis der async-await-Syntax.

Transkript

"Generators" oder auch Generatoren, haben eine besondere Bedeutung innerhalb asynchroner Programmierung. Denn sie stellen die erste Art und Weise dar, wie es möglich ist, mit Hilfe von synchron wirkendem Code, asynchronen Code innerhalb von JavaScript abzubilden. In diesem Video setzen wir uns daher mit dem Senden von Variablen und Parametern, in einen solchen Generator auseinander, um damit asynchronen Code abzubilden. Ich beginne also zunächst damit, mit Hilfe von NPM, das Paket "request" zu installieren. Als nächstes erstelle ich die Datei "02_generators.js", mit dem Addendum "async". Als nächstes importiere ich die Bibliothek "request", mit Hilfe der "require"-Funktion. Nun definiere ich einen Generator, mit der Bezeichnung "getData", der mit "yield" einzelne Zahlen ausgibt. Eine Benutzung dieses Generators erfolgt mit Hilfe meiner Iterator-Variable, und so kann ich beispielsweise nun den Iterator mehrfach aufrufen, und sehe für jeweils jede der "yield" Ausgabewerte, einen eigenen "value", wo der Iterator noch nicht geschlossen wurde, erst nach dem 4. Aufruf ist das "value undefined", und der Iterator beendet. Doch was wenn ich jetzt mit Hilfe dieser Syntax beispielsweise eine Summenfunktion bauen möchte? Diese definiert sich also nun aus Variablen, beispielsweise "a", das einen Eingabewert bekommt, "b", das einen Eingabewert bekommt, und letztendlich dem Ausgabewert, "a + b". Typischerweise müsste ich also diese Summenfunktion instanziieren als Iterator, und mit Hilfe des "next" Aufrufes, mehrfach diese Variable befüllen. Wenn ich allerdings eine schönere Syntax haben möchte, kann ich mir mit der sogenannten "Co-Routine" behelfen. Diese definiert sich über die folgende Funktion: eine Funktion, die eine Funktion als Parameter entgegennimmt, dabei sich zunächst einmal diesen Iterator erzeugen lässt, also in "res" befindet sich nun der Iterator, und hierfür eine Funktion zurückgibt, die die "next"-Funktion dieses Iterators kapselt, und direkt die Argumente übergibt. Mit Hilfe dieser Funktion, kann ich also nun meine Summenfunktion schreiben als Co-Routine, von meiner Generator-Funktion. Ein initialer Aufruf von "sumValues", um meinen Iterator zu erzeugen, der nächste Aufruf, um die Variable "a" zu befüllen mit dem Wert 3, und der Aufruf danach mit dem Wert 4, und letztendlich der Ausgabe auf die Konsole des Resultates, der Summe. Führe ich das Ganze nun also aus, so erhalte ich den Wert 7. Der Grund ist, dass beim ersten Aufruf von "sumValues", die Co-Routinen-Funktion uns also einen Iterator erzeugt, ähnlich wie hier, und alle Folgeaufrufe mit den jeweiligen Parametern, nichts weiter als Aufrufe auf "next" sind, mit der Zahl 3 und dann der Zahl 4, die entsprechend in den "yield Keywords" hinterlegt werden. Oft nennt man dieses Prinzip auch, dass Nachrichten in die Funktion gesendet werden. Mit genau diesen Bausteinen kann ich nun auch eine asynchrone Funktion abbilden. Beispielsweise nenne ich diese nun "downloadSum". Dabei möchte ich nun die "httpbin"-API verwenden, um Zahlen aufzusummieren. Ähnlich wie bereits zuvor verwende ich die Co-Routine, für meine Generator-Funktion. Dabei möchte ich nun relativ flachen Code schreiben, das heißt, zunächst hole ich mir die erste Variable, in meinem Beispiel nun die 3, mit einem Aufruf auf eine Funktion "getNumber(3)". Eine zweite Zahl 4, mit einem Aufruf "getNumber(4)". Um sicherzustellen, dass ich diese Zahlen auch wirklich erhalten habe, gebe ich auf die Konsole noch diese Werte aus. Daraufhin berechne ich mir die Summe, aus 3 und 4, und gebe auch diese auf die Konsole aus. Ich habe nun also sehr flachen Code geschrieben, um mir die Zahlen 3 und 4 zu besorgen. Als nächstes gilt es also die Funktion "getNumber" zu implementieren. Hierfür nutze ich nun die asynchrone Funktion "request", auf die URL "https:// httpbin.org /get?req=" dann der Parameter der Nummer, und die Callback Funktion, die zunächst einmal mit Hilfe von "JSON.parse", den "body" als "JSON" einliest, von dort den "request", auf den Argumenten übernimmt. Außerdem möchte ich sicherstellen, dass es sich um eine Zahl handelt, und nutze die Funktion "parseIntager". Um nun ähnlich zu agieren wie im Beispiel zuvor mit der Summe, muss ich nun diese Werte an meine Funktion "downloadSum" senden. Das heißt, innerhalb des Callbacks, sende ich diesen Wert zurück. Zu guter Letzt starte ich den Vorgang mit "downloadSum". Mit dem fundamentalen Prinzip von Generatoren ist es uns nun also gelungen, die Zahlen 3 und 4 über eine asynchrone API, mit Hilfe einer synchronen Syntax, also ohne Callback Schachtelung, sauber abzubilden. Dieses Konstrukt ist Basis für die "Await und Async Syntax" des ES2017 Standards. Gesehen haben wir nun also wie ich mit Hilfe des "Inline yield Keywords", also dem "yield"-Befehl, ohne Ausgabe es geschafft habe, Werte innerhalb meiner Funktion von außen festzulegen. Und damit wie eine Art Nachricht in die Funktion zu senden. Mit der Co-Routine habe ich es geschafft, dieses Prinzip noch besser zu kapseln, und die Funktion nur mit den jeweiligen Parametern aufrufen zu müssen und nicht über die Iteratoren.

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!