AngularJS : promise chain not deferring past 2nd function

Question

as an extension of a question I asked earlier (thanks for all the help!),
I'm having trouble getting my 2nd returned promise working (in a chain of 3 or more)
I've check out this, this but can't get any clues to my current code

app and controller look like:

myApp.controller('Controller_1', function($scope, myService) {

    var myName = "Ben";

    myService.slowService(myName)
    .then(function(result){myService.slowService2(result);})
    .then(function(result){myService.fastService(result);});

    $scope.myName = myName;
});

service provider looks like:

myApp.service('myService', function($q, $timeout) {

    this.slowService = function (name) {
        var deferred = $q.defer();
        console.log('Start of slowService1:', name, Date.now());

        $timeout(function() {
            name = 'Hello, ' + name + " is learning Angularjs";
            alert(name); 
            deferred.resolve(name);
                console.log('End of slowService1 timeout:', name, Date.now());
        }, 1500);

        return deferred.promise;
    };

    this.slowService2 = function (name) {
        var deferred = $q.defer();
        console.log('Start of slowService2:', name, Date.now());

        $timeout(function() {
            name = 'Hello, ' + name + " is learning Angularjs";
            alert(name); 
            deferred.resolve(name);
                console.log('End of slowService2 timeout:', name, Date.now());
        }, 1000);

        return deferred.promise;
    };

    this.fastService = function(name){ 
        var deferred = $q.defer();
            console.log('Start of fastService:', name, Date.now());
        alert('Hello ' + name + ' - you are quick!'); 
        deferred.resolve();
            console.log('End of fastService:', name, Date.now());
        return deferred.promise;
    };
});

Console output looks like:

Start of slowService1: Ben 1420877247858
End of slowService1 timeout: Hello, Ben is learning Angularjs 1420877250982
Start of slowService2: Hello, Ben is learning Angularjs 1420877250983
Start of fastService: undefined 1420877250984
End of fastService: undefined 1420877251641
End of slowService2 timeout: Hello, Hello, Ben is learning Angularjs is learning Angularjs 1420877254148

So while the 1st slowService1 $q.defer() works, the 3rd function fastService doesn't wait for the 2nd slowService2 deferred object to resolve prior to starting... ?

jsfiddle is here

PS $timeout is only to simulate $http calls and SQLite queries etc.

New Dev New Dev · Accepted Answer · 2015-01-10T08:12:31

You need to return the promise such that you could chain with .then:

myService.slowService(myName)
    .then(function(result){
        return myService.slowService2(result);
     })
    .then(function(result){
        myService.fastService(result);
     });

AngularJS : promise chain not deferring past 2nd function

1 Answers