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

Grundlagen der Reactive Extensions

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Reactive Extensions basieren auf den Prinzipien des Observables und sind eine beliebte alternative Lösung, um mit Asynchronität umzugehen.

Transkript

Reactive Programming ist ein alternatives, oder auch additives Konzept für asynchrone Programmierung in JavaScript. Ursprünglich stammt es aus Programmiersprachen wie Java oder C#, findet aber in Form von Rx, den sogenannten Reactive Extensions, auch seinen Anwendungsfall in der JavaScript Programmiersprache. Es bringt Vorteile mit sich, die vor allem beim Prozessieren von großen Datenmengen, zu tragen kommen. Wie wir solche Reactive Extension implementieren können, ist nun Bestandteil des folgenden Videos. In meinem Projekt beginne ich damit, das Projekt zu initialisieren, mit dem Befehl npm init. Danach installiere ich die Bibliothek rxjs, als auch request. Daraufhin definiere ich nun die JavaScript Datei, 01_rxjs.js. Ich lade die Bibliothek rxjs, mit Hilfe der require Funktion, als auch die Bibliothek request. Bei rxjs geht es um sogenannte Observables, das bedeutet, man erstellt etwas, wie beispielsweise ein sogenanntes Rx.Subject, und in dieses Subject sendet man nun einen Wert. In meinem Fall: Hello World. Für dieses Subject kann es nun multiple Interessenten geben, das heißt, ein Observable kann mehrere Observer haben. In meinem Fall ist also der erste Observer die Funktion map. Diese nimmt eine Variable x entgegen, und nutzt die toLowercase Funktion, um diese Variable umzuwandeln. Sollte der Syntax nicht erkannt werden, muss ich mein JavaScript Syntax Level, noch innerhalb meiner IDE, auf ECMAScript 6 stellen. Führe ich diese Anwendung also nun aus, so erhalte ich zunächst einmal hello world, kleingeschrieben. Wenn ich einen 2. Interessenten anmelde, der die toUppercase Funktion verwendet, so bekommen nun beide dieser pipe lines, die Variable die in das Subject gesendet wird, und können so, unterschiedlich damit umgehen. Solche Observables können auf viele Arten und Weisen initialisiert werden. Ein typischer Weg ist beispielsweise über die Syntax Rx.Observable, und dann in diesem Beispiel mit Range von 1 bis 10. Auch hier kann ich mit Hilfe der subscribe Funktion, das Ganze an die console.log weiterleiten. Damit bekomme ich also nun die Werte von 1 bis 10. Ähnlich, aber etwas individueller, kann ich mit der Funktion from, ein array entgegennehmen, beispielsweise für 3, 4 und 5, und auch hier mit subscribe, diese an eine Funktion weiterleiten. Zwischen das subscribe und dem tatsächlichen value imitor, dem Ausgabepunkt der Werte, kann ich nun beliebige Operatoren dazwischen stellen, wie in diesem Beispiel map. Ich kan dieses Konstrukt allerdings auch mit Promises kombinieren. Dafür erstelle ich zunächst einmal die requestPromised Funktion, die mir aus einer Webanfrage ein Promise erzeugt. Rx definiert auf dem Observable eine Funktion fromPromise, in der ich nun die requestPromised auf meine URL, beispielsweise https://httpbin.org, /get?req=4, legen kann. Außerdem möchte ich noch mit Hilfe der map Funktion, aus dem Ergebnis, mit JSON.parse, res.body.args.request, das Ganze als Zahl, weiterreichen. Mit Hilfe dieser Syntax kann ich nun komplexe Konstrukte bauen, wie beispielsweise eine Funktion, die alle ihr entgegenkommenden Observable Werte aufsummiert und auf die Konsole zum Schluss ausgibt. Dazu definiere ich also nun ein sogenanntes sumSubject, das ein neues Rx.Subject ist, in dieses sumSubject möchte ich die hineinkommenden Werte, mit Hilfe der reduce Funktion, aufsummieren. Das heißt, als ersten Parameter bekomme ich hier das Resultat, und als zweiten Parameter den einkommenden Wert. Zurückgebe ich also die Addition aus beiden. Wenn das Ganze abgeschlossen ist, möchte ich den resultierenden Summenwert auf die Konsole ausgeben. Als nächstes muss ich die Rückgabewerte von beiden Promise pipe lines, konkatinieren. Dafür definiere ich diese also als Variable, promise1 und promise2, und nutze als nächstes die Möglichkeit über Rx.Observable.concat, diese als Parameter promise1 und promise2, zu übergeben, und mit Hilfe von subscribe, an das sumSubject zu schicken. Das Resultat dieses Vorgangs ist also die Zahl 7. Was hier entspreched 3 plus 4 ist. Ich habe Ihnen einen Einblick in die sogenannten Reactive Extensions gegeben. Mit ihnen kann man also Datenverarbeitung von abhängigen Vorgängen abbilden. Dabei gibt es viele Vorgänge die aneinander gereiht werden können, wie beispielsweise das Abfragen eines Ergebnisses, das Filtern, das Konvertieren, das Kombinieren, all diese Möglichkeiten können innerhalb von Reactive Extensions mit einer intuitiven Syntax abgebildet werden. Die Konzepte hinter Reactive Extensions bei dem Operatoren oder auch Verarbeitungsschritte, Werte von vorangegangenen Verarbeitungsvorgängen, zu eigen machen und weiter verarbeiten. Dank der Kombinierbarkeit mit einem regulären Promise, können so asynchrone Daten auf komplexere Art und Weise verarbeitet werden. Besonders in der Programmierung ist es mit Hilfe der Reactive Extensions deutlich einfacher die Speicherreservierung zu steuern. Denn beim Nutzen von async und await Funktionen beispielsweise, können ungewollte Nebeneffekte entstehen, die man auf Grunde des komplexen Codes im Hintergrund, nicht direkt erkennen kann. Außerdem erhält man eine argumentierfähige Kontrollstruktur, was so viel heißt, wie dass man, anhand der Operatoren, wie beispielsweise concat, oder auch map, die verschiedenen Vorgänge, die innerhalb einer solchen pipe line entstehen, artikulieren kann. Generell entsprechen alle Prinzipien, die bei Reactive Extensions angewendet werden, klassicher, funktionalier Programmierung. Und kann so unerwünschte Nebeneffekte vermeiden.

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!