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 zu async und await

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
async und await sind noch Proposal-Zustand für den ES2017-Standard, können aber bereits heute auf Basis von Babel eingesetzt werden.

Transkript

Jahrelang haben sich Millionen von JavaScript Entwicklern weltweit mit den Tücken und Komplexitäten von Callbacks oder auch Promises und allen anderen denkbaren Hilfskonstrukten umherschlagen müssen. All das soll nun ein Ende haben mit der offziellen ES2017-Syntax Async und Await, mit der es nun möglich ist asynchronen Code, synchron zu schreiben. Wie genau das funktioniert und schon heute eingesetzt werden kann, werde ich Ihnen im Folgenden demonstrieren. Zunächst einmal beginne ich dafür damit mein Projekt aufzusetzen. Ich starte mit dem Befehl npm init, um die package.JSON Datei zu definieren. Zusätzlich benötige ich nun einige sogenannte Compiler, die es ermöglichen neueren JavaScript Code auf meiner etwas älteren NodeJS Version auszuführen. Als auch möglicherweise in einem Browser. Für NodeJS verwende ich dafür zunächst einmal die Abhängigkeit babel-register, das Babel Preset 2015, den babel-polyfill, und zu guter Letzt, das babel-plugin für transform-async-to-generator. Unter Umständen habe ich mich verschrieben, beispielsweise hier bei dem Preset 2015, das selbstverständlich Preset ES2015 heißt. Mit diesen Tools kann ich nun auch ECMA Script 2015 oder auch ES 6 schreiben. Dafür nutze ich noch meine IDE, auf dem Sprachlevel ECMA Script6. Daraufhin definiere ich meine Datei mit der Bezeichnung babelrc. Diese gibt nun presets an, das von mir heruntergeladene preset ES2015, als auch zusätzlich das Plugin mit der Bezeichnung transform-async-to-generator. Als nächstes möchte ich nun, dass mein Code automatisch kompiliert wird. Dafür erstelle ich mir üblicherweise eine Hilfs-JavaScript Datei mit der Bezeichnung start.js. Diese lädt sowohl die Bibliothek babel-polyfill, als auch den babel-requireHook, babel-register. Damit werden also automatisch alle Dateien, die mit require geladen werden, kompiliert. Ich kann nun mit Hilfe des gegebenen Applikationsparameters auf process.argv, prüfen, ob eine Datei angegeben wurde, sollte das also nicht der Fall sein, gebe ich auf die Konsole aus, dass keine Datei angegeben wurde, und beende die Anwendung. Andernfalls lade ich mit Hilfe von require, aus dem aktuellen Ordner, genau diese Datei. Für diesen Zweck definiere ich also nun eine Startkonfiguration, die als Applikationsparameter, 01_asyncawait entgegennimmt. Außerdem erstelle ich nun diese Datei, 01_asyncawait.js. Innerhalb dieser Datei kann ich nun also den vollen ECMA Script Syntax verwenden. Ich definiere dafür nun eine Funktion mit der Bezeichnung result1, die nichts weiter tut, als die Zahl 1 zurückzugeben. Wenn ich nun result1 ausführe, und auf die Konsole ausgebe, so erhalte ich den Wert 1. Soweit nichts Besonderes. Allerdings kann ich diese Funktion nun auch mit asynchron markieren. Beim nächsten Aufruf, erhalte ich nun nicht mehr die Zahl 1, sondern ein Promise. Das bedeutet also, dass durch das Hinzufügen des keywords async, meine Funktion nun Promises zurückgibt. Wie bereits bekannt, kann ich mit der Syntax then, das Promise auflösen. Da es sich nun wie eine übliche Funktion verhalten sollte, kann ich auch hier einen error ausgeben, mit der Syntax throw, new error, Error occured, und auf meinem Promise, mit catch diesen Fehler entgegennehmen, und als Error ausgeben. Damit habe ich schon einen großen Gewinn, ich muss kein Promise mehr erzeugen, immer dann wenn ich einen Wert ausgeben möchte, oder auch einen Fehler auslöse. Resolve und reject werden automatisch von der neuen Syntax aufgelöst. Auch bei Definition einer Folgefunktion, wie beispielsweise result2, kann ganz normal, mit der üblichen Async Syntax, gearbeitet werden. Wie üblich bei regulärem Promise Chaining, kann auch beispielsweise der catch bis zum Schluss durchgereicht werden. Wenn ich nun eine zusätzliche Funktion definiere, result3, die ähnlich wie result2, auf result1 zurückgreift, und hier lediglich 2 addiert, kann ich nun eine gemeinsame Funktion, mit der Bezeichnung runAll definieren, die sowohl result2, als auch result3 als Funktion ausführt. Was nun aber wenn in einer von beiden Funktionen ein Fehler auftritt? Und ich sicherstellen möchte, dass ich sowohl im einen, als auch im anderen Fall damit umgehe. Zunächst einmal kann ich nun beide auf die Konsole ausgeben, mit console.log. In diesem Fall, wird das lediglich zu den jeweiligen Promise führen. Innerhalb einer asynchronen Funktion, kann ich jedoch auch auf ein Ergebnis warten, mit der Syntax await. Diese fungiert also ähnlich wie ein Aufruf von then. Sollte ich nun allerdings einen Fehler werfen, beispielsweise in der result2 Funktion, so wird meine runAll Funktion nicht mehr korrekt ausgeführt. Aber ähnlich wie bei normalem synchronen Code, kann ich mit einem einfachen try catch, den Fehler abfangen. Mit Hilfe dieser Syntax kann ich also die interessantesten Konstrukte bauen. Beispielsweise könnte ich mir nun eine Funktion erstellen, mit dem Titel sleep. Die eine Anzahl an Millisekunden entgegennimmt, mit Hilfe der setTimeout Funktion, und den Millisekunden, ein Promise kapselt, und defacto als asynchron gilt. Zusätzlich auch durch async markiert. Innerhalb einer anderen Funktion, beispielsweise der waitingExample, kann ich nun meinen Programmfluss einfrieren, beispielsweise für 3 Sekunden, dann Start ausgeben, nochmal für 2 Sekunden schlafen, und dann das Ende markieren. Zuletzt möchte ich zeigen wie der echte Code hinter der JavaScript Datei aussieht. Dafür verwende ich den Babel Compiler, den ich über npm install, minus g, babel minus cli, installieren kann. Über babel, minus o, kann ich nun eine Datei definieren, die das Resultat repräsentiert von 01_asyncawait.js. Sollte die babel-cli nicht korrekt installiert sein, wird genau dieser Fehler auftreten. Der Code hinter unserem Await-Async Syntax, ist sehr kompliziert und wird durch eine Statementmachine repräsentiert, die basierend auf dem Generator-Prinzip, einzelne Teilaspekte in sich in case statements kapselt, und dann so prozessiert als würde der Code synchron ausgeführt werden. Die Details dahinter sind unter Umständen sehr kompliziert und meistens auch nicht von Bedeutung. Da die reguläre Syntax verständlich ist und für jedermann zu benutzen. Innerhalb von JavaScript gibt es also ähnliche Konzepte wie in C# oder Python. Dank der keywords async und await. Diese wurden auf Basis der Promise API umgesetzt, und schaffen eine gewisse Instransparenz darüber, dass sich hier tatsächliches asynchrones Verhalten abspielt. Die Implementierung, wie gesehen, basiert auf einer sogenannten Statemachine, die mit Hilfe von Generatoren, diesen Kontrollfluss abbildet. Der Code, der daraus resultiert ist nur sehr schwer nachvollziehbar, und es empfiehlt sich immer beim debugging mit dem ursprünglichen Code und Code maps zu arbeiten. Die Tools, die nötig sind, um heute schon Async und Await einzusetzen, sind die Babel-Utilities und vor allem auch der Babel-Compiler.

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!