Chapter 8: Chaining promises and promise handlers

by billy roberts

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl"></div>
</div>

JavaScript

// promise handler trees
angular.module('myApp', [])
.controller('Ctrl', function ($q, $log) {
    var deferred = $q.defer()
    , promise = deferred.promise;
    
    var incr = function(val) {
        $log.log(val);
        return val+1;
    };
    
    // define the top level promise handler
    promise.then(incr);
    // append another handler for the first promise, and collect
    // the returned promise in secondPromise
    var secondPromise = promise.then(incr);
    // append another handler for the second promise, and collect
    // the returned promise in thirdPromise
    var thirdPromise = secondPromise.then(incr);
    
    // at this point, deferred.resolve() will:
    // resolve promise; promise’s handlers executes
    // resolve secondPromise; secondPromises’s handler executes
    // resolve thirdPromise; no handlers defined yet
    
    // additional promise handler definition order is
    // unimportant; they will be resolved as the promises
    // sequentially have their states defined
    secondPromise.then(incr);
    promise.then(incr);
    thirdPromise.then(incr);
    
    // the setup currently defined is as follows:
    // promise -> secondPromise -> thirdPromise
    // incr()     incr()           incr()
    // incr()     incr()
    // incr()
    
    deferred.resolve(0);
    // 0
    // 0
    // 0
    // 1
    // 1
    // 2    
});