JavaScript: Asynchrone Programmierung

Hilfsfunktionen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auf dem Promise sind statische Methoden definiert, die den Umgang mit mehreren Promises gleichzeitig erlauben.

Transkript

Für einige besondere Anwendunsfälle bietet die Promise API zusätzliche Funktionen. Mit denen man beispielsweise die Abarbeitung mehrerer Promises parallel steuern kann. In diesem Video betrachten wir dafür die Funktionen Promise.all, und Promise.race. In meinem Projekt lege ich dafür eine Datei mit der Bezeichnung 04_promise_utilities.js an. Wie üblich benötige ich die Bibliothek babel-polyfill, als auch die Möglichkeit Ressourcen im Internet abzurufen, mit der Bibliothek request. Meine Funktion request.promise, hilft mir dabei, Webanfragen zu versenden, und diese innerhalb eines Promise darzustellen. Mein Ziel ist es nun, gleichzeitig drei Anfragen zu verschicken, und darauf zu warten, dass alle drei eingetroffen sind und deren Resultat darzustellen. Dafür verwende ich also, zunächst einmal für meinen ersten request eine Variable, mit der Bezeichnung request1, und einem Aufruf auf die request.Promise Funktion, gegen die API von httpbin.org /get?req=1. Außerdem möchte ich noch sicherstellen, dass das Ergebnis nur die Zahl ist. Nicht der HTML Code beziehungsweise das JSON Objekt. Dafür erstelle ich eine Funktion mit der Bezeichnung parseJson, die als Parameter das Resultat entgegennimmt, und mit Hilfe der Funktion JSON.parse, aus dem Resultat, den request Parameter extrahiert. Dank der Promise API, kann ich nun mit einem Aufruf von then, dies an parseJson weiterleiten. Diese Zeile dupliziere ich nun zweimal, für request2 und request3, mit entsprechenden Aufrufparametern, und nun gilt es, all diese requests zu kombinieren. Mit Hilfe von Chaining könnte ich nun alle hintereinander hängen, beispielsweise mit then, request2. Allerdings möchte ich, dass alle parallel aufgelöst werden. Dafür verwende ich die Hilfsfunktion Promise.all, die als Parameter ein array von Promises entgegennimmt, in meinem Fall also request1, request2 und request 3, und selbst wieder ein Promise zurückgibt. Dass ich also mit Hilfe von then und der Funktion console.log auf die Konsole ausgebe. Wenn ich das Ganze nun also ausführe, erhalte ich als Resultat die Rückgabewerte aller Aufrufe auf einmal. Ein weiterer interessanter Anwendungsfall wäre es, wenn ich mehrere Abfragen auf einmal abschicke, mich aber nur für die interessiere, die am Schnellsten ist. Dafür definiere ich nun eine Liste von URLs, basierend auf httpbin, diesmal allerdings mit den Möglichkeiten eine Zeitverzögerung zu produzieren, im ersten Fall also 10 Sekunden, und im zweiten Fall 5 Sekunden. Die Hilfsfunktion hierfür ist Promise.race, die, ähnlich wie Promise.all, ein array von Promises entegennimmt. Dafür verwende ich also meine Liste von URLs, und erstelle aus diesen, mit der requestPromised Funktion, neue Promises. Da ich hier nun also nur einen einzigen Wert zurückbekommen werde, also den der schnellsten Funktion, kann ich diese nun durch die parseJson Funktion schicken, und zu guter Letzt, auf die Konsole ausgeben. Und obwohl sich unser Prozess nun regulär beendet hat, ist der Aufruf der API mit dem delay von 5, der also schneller war als der delay von 10, als Einziger das Resultat des Promise.race. Alternativ könnte ich mir hier auch einen Konstrukt bauen, bei dem ich mit Hilfe der setTimeout Funktion, und einem Promise, mit resolve und reject, nach beispielsweise 5 Sekunden, oder 3 Sekunden, einen Abbruch setze. Ich gebe dieser Variable also den Namen abort, Und verwende wieder die Funktion Promise.race, in dem Fall also nun aus abort, oder dem requestPromised, auf die URL. Mit dem catch kann ich nun den Fehler entgegennehmen, und beispielsweise mit Aborted sichtbar machen. Sollte das Ganze positiv ausgehen, die API also schneller sein, kann ich ganz normal über die parseJson, und die Ausgabe auf die Konsole, den Rückgabewert anzeigen. In diesem Fall ist also nun innerhalb des Promise.race, das Aborted eingetreten, bevor der Wert von der API zurückgesendet wurde. Mit dieser Art von Konstrukt stelle ich also sicher, dass meine Anwendung nicht zulange auf bestimmte Anfragen warten muss. Die Promise.all Funktion, hat uns also dafür gedient, um auf alle Promises innerhalb der Liste zu warten. Durch das gleichzeitige Auslösen der Auflösung der Promises, konnten alle ihre Ressourcen parallel herunterladen. Doch da keine Aktion passiert ist bevor nicht alle Promises tatsächlich ihr Resultat geliefert haben, bezeichnet man diese Art von Konstrukt auch als Promise-Gate. Die Hilfsfunktion Promise.race haben wir dafür genutzt, um den zeitlichen Ausgang unseres Promise sicherstellen zu können. In meinem Beispiel habe ich auf den Ausgang mit einem Fehler reagiert, sollte er nicht in der von mir erwarteten Zeit aufgetreten sein. Dafür habe ich das Ganze eben mit der Funktion setTimeout kombiniert.

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!