Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

JavaScript: Asynchrone Programmierung

Promise API

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Mit den Methoden then und catch kann das Promise im Wesentlichen gesteuert werden.

Transkript

Ein Promise hat eine weit mächtigere API, als das einfache Auflösen von Callback Problematiken. Mit genau der API wollen wir uns im Laufe des folgenden Videos auseinandersetzen. Für diesen Zweck erstelle ich eine neue JavaScript Datei mit der Bezeichnung 02_Promise_API.js. Als erstes stelle ich sicher, dass das Promise zur Verfügung steht, mit der Bibliothek babel-polyfill. Für requests ins Internet, nutze ich die Bibliothek request, mit Hilfe der require Funktion auf request. Dafür sollte ich noch sicherstellen, dass mit npm install, minus, minus, save, request auch in meinem Projekt installiert ist. Da standardmäßig die Bibliothek request keine Promises unterstützt, muss ich nun dafür Rechnung tragen und selber eine Implementierung schreiben. Ich definiere also hier ein Promise, mit Hilfe des Konstruktors für ein Promise, den Argumenten resolve und reject, und innerhalb dieses Promises, nutze ich nun den Aufruf auf request, beispielsweise gegen die URL: httpbin.org/ get?req=1. Hier nehme ich den regulären Callback entgegen, der, zum Einen, den Fehler enthält, das http Objekt, als auch den body. Nun kann ich zum ersten Mal Gebrauch davon machen, dass ich einen Fehler zurückbekomme. Das bedeutet, ich benutze hier die Funktion reject, um das Promise als fehlerhaft zu markieren. Dabei gebe ich diesen Fehler auch zurück. Andernfalls, nutze ich die Funktion resolve, und lade dafür die Daten aus dem body, in ein JSON Objekt, und gebe von dem JSON Objekt lediglich den request Parameter zurück. Dieses Promise kann ich nun intuitiv verwenden, indem ich mit Hilfe der console.log Funktion, den Rückgabewert auf die Konsole ausgebe. In meinem Fall also nun 1. Doch was passiert nun im Fehlerfall? Beispielsweise, wenn die URL nicht existiert. In meinem Fall gar nichts. Das bedeutet, ich sehe nicht, dass tatsächlich ein Fehler aufgetreten ist. Dieses unintuitive Phänomen, wird oft Promises als großer Fehler nachgesagt. Da man immer explizit dafür sorgen muss, dass Fehler behandelt werden. Und ansonsten werden diese Fehler defacto vom Promise verschluckt. Den Fehler abfangen, kann ich mit Hilfe des Aufrufes von catch, und einer Funktion, die diesen Fehler nun entgegennimmt. Innerhalb dieser Funktion, kann ich also den Fehler beispielsweise auf die Konsole ausgeben. Und siehe da, der Fehler ist nun sichtbar. In meinem Beispiel habe ich nun allerdings eine sehr zielgerichtete Implementierung geschrieben. Ich möchte allerdings, dass ich zukünftig alle Aufrufe von request, in ein Promise schachteln kann. Dafür definiere ich also eine neue Funktion, mit dem Bezeichner requestPromised, diese nimmt eine URL entgegen, und gibt folglich ein Promise zurück. Statt dieser URL, gebe ich also den Parameter URL an, und da ich nur einen Wert zurückgeben kann, konstruiere ich ein Objekt, auf dem res definiert ist, und body. Damit habe ich also nun eine generische Funktion, die ich immer mit der Promise Syntax verwenden kann. Das Ganze möchte ich nun beispielhaft verwenden, um zwei Aufrufe ins Web zu machen. Dafür kopierer ich zunächst einmal die URL, erzeuge mir ein array für meine Ergebnisse, benutze meine neu erstelle Funktion requestPromised, mit der URL, und der üblichen Promise Syntax. Also bei Rückgabe eines Wertes, bekomme ich also hier das Resultat, welches nun selbstverständlich durch die JSON.parse Funktion laufen muss. In meinem array, gebe ich das Ganze also mit Hilfe der push Methode und der Wert entstammt dem resultat.body. Ohne die Komplexität von tiefen, geschachtelten Callbacks, kann ich in der Promise Syntax, ein neues Promise dank return Funktion zurückgeben. In diesem Beispiel, frage ich also nun die Seite mit request 2 ab. Auch hier bekomme ich eine Funktion mit dem Resultat zurück, die quasi direkt anschließt. Zu guter Letzt, möchte ich mein Ergebnis noch auf die Konsole ausgeben, dafür benötige ich keinen zusätzlichen return innerhalb dieser Funktion, allerdings muss ich einen weiteren Aufruf auf then definieren. Und in diesem Aufruf, gebe ich diesen Wert von der Funktion nun in die Konsole aus. Vorher kommentiere ich noch das vorherige Beispiel aus, und starte nun die JavaScript Datei. Wie erwartet wurde alles in korrekter Reihenfolge ausgeführt, Und das Resultat ist nun die Zahl 1 und die Zahl 2 in Form von Text, innerhalb des array. Ein weiterer, sehr wichtiger Aspekt dieser Abfolge Syntax ist die Möglichkeit, den Fehler, der innerhalb jeder dieser Funktionen hier auftreten kann, mit einem catch zentral abfangen zu können. Ich gebe auf die Konsole nun Error occured aus, und außerdem den tatsächlichen Fehler. Das bedeutet, je nach dem wo ich den Fehler nun setze, auch beispielsweise später in der Abfolge, kann ich den Fehler zentral abfangen. Mit nur zwei Arten von Befehlen ist die Promise API also sehr vielseitig. Der erste Befehl, den wir kennengelernt haben, ist der Vorgang then. Er bedeutet, dass wir einen Folgevorgang, basierend auf dem ursprünglichen Promise durchführen. Das bedeutet, wenn wir then mehrfach nacheinander verwenden, so werden alle Promises, die hier in Folge gestellt werden, automatisch aufgelöst und wir können eine Kette bilden, sogenanntes Promise-Chaining. Der Eingabewert einer solchen then Funktion ist der Callback. Beispielsweise also eine Funktion, die mit dem Resultat umgehen soll. Der Ausgabewert eines solchen Promise kann ein weiteres neues Promise sein, sodass die Kette weitergeführt wird. Zusätzlich gibt es noch den Aufruf von catch, dieser sammelt die Fehler des jeweils letzten Promise ein. Je später man diesen catch stellt, umso globaler gilt er. Das bedeutet, wenn der catch der letzte Aufruf in der Promise-Chain ist, so wird er jede Art von Exception der Promise-Chain abfangen können.

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!