Callback Hell ? Promises in JavaScript !

KonstantinK

Vielleicht kennen Sie das – sie möchten Teile Ihrer Webseite mittels AJAX asynchron nachladen. Problematisch ist dabei nur, dass sie auf mehrere unterschiedliche Ressourcen zugreifen müssen die irgendwie voneinander abhängig sind und daher die AJAX Aufrufe verschachtelt werden müssen. Dieses Phänomen bzw. diese Problematik ist in der Webentwicklung auch als ‘Callback Hell’ oder ‘Pyramid of Doom’ bekannt.

Aushilfe liefern in diesem Fall Promises in JavaScript. Im Gegensatz zu aynchronen Funktionen, die das jeweilige Ergebnis des Funktionsaufrufes an einen Callback-Handler übergeben, sind Promises Objekte, die selbst das Ergebnis einer asynchronen Funktion enthalten. Das Promise Objekt verfügt schließlich über zwei Methoden: resolve() um über das Ergebnis zu informieren und reject() um über den Fehler zu informieren. Die native Implementierung von Promises in Ecmascript 6 hat die folgende Syntax:

var promise = new Promise(function(resolve, reject){
     var berechnung = 99; // asynchrone Berechnung hier   
     if (berechnung < 42) {
           reject('Die Berechnung ist kleiner 42');
     } else {
           resolve(berechnung);
     }
});

Das Promise Objekt kann intern drei Zustände annehmen:

1. Pending: Die Funktion ist noch nicht fertig ausgeführt, Warten
2. Fulfilled: Die asynchrone Funktion wurde erfolgreich ausgeführt, Erfüllt
3. Rejected: Die asynchrone Funktion wurde nicht erfolgreich ausgeführt, Abgelehnt

Der wesentliche Vorteil von Promises liegt also darin, dass keine Callbacks mehr notwendig sind. Die Parameter werden als nicht mehr an eine Callback Funktion übergeben, sondern an das Promise Objekt. Dadurch ist ein Verketten von Funktionen möglich. Promises bieten die Methode .then() an, um das Ereignis schließlich zu behandeln.

asyncFunction().then(
   function(success){
      console.log(success);
   },
   function(error){
      console.log(error)
   }
);

Das Konzept von Promises ist in der Programmierung schon seit Mitte der 1970er Jahre bekannt. In JavaScript halten sie in Ecmascript 6 Einzug. Aktuell befindet sich ES6 noch im Entwicklunsstadium, weshalb native Promises noch nicht von allen gängigen Browsern unterstützt werden. Es gibt jedoch einige JavaScript Bibliotheken, wie jQuery, die sich um diese Problematik bereits vor ein paar Jahren angenommen haben. Abschließend noch ein kurzes Beispiel für ein Promise mit jQuery:

// 1. 
var getCustomer = $.ajax({
    type: 'GET',
    url:'../../data/customer.json'
});

// 2.
getCustomer.then(
    function(data){
        console.log(data);
    }, function(xhr, state, error){
        console.log(arguments);
    }
);