Async/Await in JavaScript – Die Grundlagen

Posted by in JavaScript

Asynchrone Programmierung ist immer wieder eine Herausforderung. Ein häufiges Problem ist die Callback Hell

callback in callback in callback
image-438

Inzwischen existieren in JavaScript mehrere Möglichkeiten mit der Komplexität umzugehen. Allen voran Promises, die seit ES2015 sogar zum Sprachstandard gehören.

Noch einfacher mit Async/Await

Mit ES2017 kommt eine weitere Abstraktion hinzu. Sie baut auf Promises auf und der Code liest sich damit wie synchroner Code. Aber fangen wir von vorne an. Zuerst wird eine Funktion mit einem asynchronen Aufruf gebraucht. Dafür benutze ich das API von https://theysaidso.com.

Mit etwas Übung fällt der Fehler in dieser Funktion sofort ins Auge. Der asynchrone Aufruf kommt irgendwann zurück, aber da wurde das Ergebnis schon zurückgegeben.

Weiterentwicklung mit Promises

Ein erster Schritt, um das zu umgehen sind Promises. Das würde dann so aussehen.

Da der Thread nicht blockiert wird, solange das Promise nicht aufgelöst wurde, spuckt das Programm die letzte Konsolenausgabe zuerst aus.

Das Ende
Remove the temptation to settle for anything short of what you deserve.

Promise hell
image-439

Ganz so schlimm ist es natürlich nicht. Promises haben aber ihre ganz eigenen Probleme. Wie man diese umgeht wird in diesem Beitrag über die Promise hell sehr gut erläutert.

Async/Await

Mit async markierte Funktionen können abwarten bis ein Promise zurückkommt. Dafür wird das Schlüsselwort await benutzt. Die Funktion pausiert dann an dieser Stelle.

Ruft man asyncInspiration() auf, dann sieht die Ausgabe so aus.

Remove the temptation to settle for anything short of what you deserve.

An der mit async markierten Stelle wird tatsächlich pausiert. Ansonsten würde auf der Konsole das Promise-Objekt ausgegeben werden.

Fazit

Ich persönlich finde synchronen Code besser lesbar. An asynchronen Aufrufen führt aber in der heutigen Entwicklung nichts mehr vorbei. Zum Glück kommt in ES2016 Async/Await zum Sprachstandard hinzu. Mit dieser Technik wird asynchroner Code noch besser lesbar als mit Promises.

Im nächsten Teil geht es dann weiter mit Fehlerbehandlung, Probleme von Async/Await und der eigentlichen Grundlage von Async/Await – Den Generatoren.