© 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 Funktion als Callback übergeben. Diese wird von jQuery mit den geladenen Blogartikeln als Argument aufgerufen, sobald der Server sie geliefert hat.

Seit Version 1.5 beherrscht jQuery neben dem hier gezeigten Callback-Interface alternativ auch ein auf Promises basierendes API. Ein Promise ist ein Objekt, welches von einer asynchronen Operation anstelle eines expliziten Ergebnisses zurückgeliefert wird. Der Name ist hier also wörtlich zu verstehen. Ein Aufruf einer Operation liefert nicht das Zielergebnis zurück, da dies ja noch gar nicht vorliegt, sondern ein Versprechen, sich dieser Operation anzunehmen und nach Abschluss dieses Versprechen einzulösen. Im Fall des zuvor betrachteten Beispiels sieht dieses Vorgehen wie folgt aus:

var articlePromise = $.ajax({ dataType: "json", url: "/blog/all-articles...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang