© saicle/Shutterstock.com
Kolumne: The Good Parts

Kolumne: The Good Parts


Die Spezifikation von JavaScripts nächster Inkarnation ECMAScript 6 (Harmony) macht Fortschritte. Features werden festgelegt, diskutiert und bereits von diversen Umgebungen implementiert. So ist es heute schon möglich, große Teile dieser nächsten Evolutionsstufe zu nutzen – sei es durch experimentelle Engine-Implementierungen oder durch Transpiler wie Googles Traceur [1]. Diese Kolumne befasst sich mit zwei neuen Merkmalen von ES6 und ihrem Zusammenspiel: Prom­ises und Generator Functions. Richtig genutzt erlauben diese beiden Konzepte die Verknüpfung asynchroner Operationen auf eine Art, wie sie bisher in JavaScript nicht denkbar gewesen ist – elegant, performant und verständlich.

Promises

Bevor wir uns den kombinierten Möglichkeiten dieser beiden Features widmen, sollen sie zunächst separat betrachtet werden.

Promises (deutsch: Versprechen) sind ein alternatives Konzept zur Kontrolle von asynchronen Operationen in JavaScript. Sie können dabei helfen, tief verschachtelte Konstrukte aus Callback-Funktionen zu entwirren und saubere APIs bereitzustellen. Promises existieren nicht erst seit ES6. Vielmehr wurden sie als derart nützlich eingestuft, dass sie in die Spezifikation übernommen wurden, um sicherzustellen, dass jede moderne Engine sie in Zukunft beherrschen wird. Diverse Libraries und Frameworks (jQuery, AngularJS …) implementieren bereits heute die existierende Spezifikation [2]. Änderungen an der Engine selbst sind hierfür nicht nötig, die Umsetzung kann mit aktuellen JavaScript-Bordmitteln erfolgen.

Doch wie genau funktionieren Promises? Am einfachsten lässt sich diese Frage beantworten, wenn man ein Beispiel mit üblichen Callback-Funktionen und eine Variante mit Promises gegenüberstellt. Eine einfache Grundlage für das Beispiel liefert jQuery: Eine der wohl bekanntesten asynchronen Operationen ist das nachträgliche Laden von Content aus dem Backend. jQuery bietet hierfür die praktische Abstraktion $.ajax, welche sich um sämtliche Cross-Browser-Eigenheiten kümmert, damit wir uns auf das Wesentliche konzentrieren können. Das Beispiel in Listing 1 nutzt eben jene Funktion, um beispielhaft eine Liste von Blog-Posts zu laden.

Listing 1

$.ajax({ dataType: "json", url: "/blog/all-articles", success: function(articles) { // Do something with the // freshly fetched articles } });

Der Aufruf der $.ajax-Funktion ist leicht verständlich: Neben dem erwarteten Datentyp – in diesem Fall JSON – wird der Ziel-URL der Anfrage überreicht. Abschließend wird eine Fu...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang