Kolumne: The Good Parts

Kolumne: The Good Parts

Jakob Westhoff


Promises 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 }});$.ajax({ dataType: "json", url: "/blog/all-articles", success: function(articles) { // Do something with the // freshly fetched articles }});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"});articlePromise.done(function(articles) { // Do something with the retrieved articles here});Listing 2var articlePromise = $.ajax(...);var commentPromise = $.ajax(...);var ...

Kolumne: The Good Parts

Kolumne: The Good Parts

Jakob Westhoff


Promises 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 }});$.ajax({ dataType: "json", url: "/blog/all-articles", success: function(articles) { // Do something with the // freshly fetched articles }});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"});articlePromise.done(function(articles) { // Do something with the retrieved articles here});Listing 2var articlePromise = $.ajax(...);var commentPromise = $.ajax(...);var ...

Neugierig geworden?


    
Loading...

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