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

Keywords

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Keywords await und async sind eigene Sprachkonstrukte, die eine leicht verständliche Abstraktion über Generatoren und Promises bieten.

Transkript

Die Keywords async und await haben einige Besonderheiten, deren man sich bewusst sein sollte, bevor man mit der Implementierung beginnt. Im Laufe dieses Videos stelle ich Ihnen daher die Keywords async und await im Detail vor. Zunächst einmal beginne ich damit, in meinem Projekt die Bibliothek request, mit dem Befehl npm install, minus, minus, save, request, zu installieren. Außerdem erstelle ich eine Datei mit der Bezeichnung 02_keywords.js. Meine Startkonfiguration ruft nun auch nicht mehr die JavaScript Datei async und await auf, sondern 02_keywords. Statt der require Syntax kann ich, dank dem ES2015 Standard, aus der Bibliothek request, die Variable request importieren. Auch mit der neuen ES2017 Syntax Async und Await, bleibt es mir nicht erspart eine Funktion zu schreiben, die die request Funktion und ihren Callback kapselt. Ich nenne diese also promisedRequest, die eine Menge von Argumenten entgegennimmt, und in sich ein neues Promise erzeugt, mit den Parametern resolve und reject, und daraufhin mit der request Methode, den Argumenten und der Callback Funktion, diese an die resolve Funktion, in Form des Resultates übergibt, gekapselt in einem Objekt, res und body. Außerdem sollte auch im Fehlerfall, der reject mit dem jeweiligen Fehler stattfinden. Das für mich zunächst einmal intuitive Vorgehen wäre hier mit dem promisedRequest, eine URL abzurufen, beispielsweise https:// httpbin.org, /get?req=1. Das Resultat möchte ich nun awaiten. Bereits IntelliJ weist mich darauf hin, dass ich die Await Syntax Und beim Starten wird es automatisch hier an dieser Stelle einen Fehler geben. Denn ein Await kann immer nur innerhalb einer asynchronen Funktion stehen. Also beispielsweise die asynchrone Funktion Start, innerhalb derer ich nun tatsächlich diese Zeile ausführen kann. Dank der ES2015 Syntax, kann ich auch bereits das Objekt body als Variable definieren. Dies ist ähnlich, als würde ich nun aus dem resultierenden Objekt, res.body, in die Variable body schreiben. Die Funktion starte ich dann relativ einfach mit einem simplen Aufruf. Ähnlich wie bei regulären Promises, würde ein Fehler nun dazu führen, dass dieser vom Promise verschluckt wird. Nur mit Hilfe von try, und catch, kann hier sichergestellt werden, dass der Fehler tatsächlich auch nicht verloren wird. Auch der Aufruf von mehreren URL Downloads ist kein Problem. Dafür definiere ich zunächst einmal eine Liste von URLs, In dem Fall also mit 1, 2 und 3. Außerdem definiere ich eine asynchrone Funktion, getAll, die mir aus dieser Liste von URLs nun Promises erzeugen soll. Genauso wie auch bei regulären Promises, kann mit Hilfe der Funktion Promise.All, auf alle Resultate gewartet werden. Da es sich hierbei nun also um ein array handelt, in dem jedes Objekt eine body Variable enthält, kann ich diese auf Variablen mappen, mit Hilfe von body, body1, body, body2, und body, body3. Natürlich darf ich an dieser Stelle nicht vergessen, mit der Funktion await, auf das Resultat von der Funktion Promise.all zu warten. Mit console.log, kann ich nun mit JSON.parse, diese JSON Objekte in Form des bodys, auf die Konsole ausgeben. Sollte ich nun einen Fehler gemacht haben, wie beispielsweise hier mit httpbun, ist es nun sehr schwierig festzustellen, wo genau mein Code nicht funktioniert. Oftmals ist der einfachste Weg das Setzen des Debugger Breakpoints. Da ich mich so nicht innerhalb des Codes befinde, der tatsächlich aus diesem Code generiert wird. So kann ich beispielsweise nun vor dem Abruf der Promises, als auch nach dem Abruf den Debugger Breakpoint setzen. Auch wenn die Anzeige des Codes oberhalb nicht komplett richtig ist, kann ich trotzdem durch alle Variablen navigieren und ihre Zustände betrachten. Beispielsweise auch für die Promises. Ich korrigiere nun noch meinen Fehler, entferne die Debugger Statements, und starte meinen Code. Zu guter Letzt möchte ich noch vor einem typischen Problem warnen. Dafür erstelle ich die Funktion mit der Bezeichnung warning. Diese ist selbstverständlich asynchron, und definiert nun ein Resultat. Indem ich Werte festhalten möchte, die ich durch Abruf der URLs generiere. Ich gehe nun also durch die Liste von URLs, definiere hier eine Callback Funktion, die ich auch als asynchron markiere, bekomme nun also für jede URL diese als Parameter mitgeteilt, extrahiere hier den body, aus dem Aufruf des PromisedRequest, auf die URL, und übergebe diesen in meine Variable res. Nach etwa 10 Sekunden, überprüfe ich nun den Inhalt der Variable res. Wenn ich also nur lange genug auf mein Resultat warte, funktioniert das Ganze korrekt. Entferne ich nun allerdings diese Timeout Funktion, und erwarte, dass hier innerhalb dieses Callbacks gewartet wird, und die Variable res meinen Inhalt hat, so ist das nicht der Fall. Das bedeutet, immer dann wenn man innerhalb einer asynchronen Funktion, nochmal asynchrone Funktionen in Form von Callbacks verwendet, ist es nicht garantiert, dass die Abfolge der Befehle korrekt ist. Zusammenfassend ist also das async Keyword Entweder eine reguläre JavaScript Funktion, oder die neue Arrow Syntax. In dem Moment, wo man async verwendet, wird der Rückgabewert einer solchen Funktion immer als Promise gekapselt. Selbst wenn er nicht asynchron wäre. Das Keyword await markiert also einen virtuellen Haltepunkt der Funktion. Das bedeutet, dass an jeder Stelle, wo ein await steht, die Funktion in Teilabschnitte geteilt wird. Diese Teilabschnitte werden durch eine Statemachine im Hintergrund sichergestellt. Dank der Await Syntax kann allerdings auch auf übliche Mechanismen wie try und catch zurückgegriffen werden. Wie zuletzt gesehen, sollte man vorsichtig sein, sobald man Callback Vorgänge innerhalb einer asynchronen Funktion verwendet. Denn nur dann wenn das Ergebnis ein Promise ist, kann man korrekt in der Funktion und des Kontrollflusses auf dieses warten.

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!