q.all not working for multiple promises

All we need is an easy explanation of the problem, so here it is.

I have the following q.all calling to resolve two promises. I checked all the posts and tried all other ways of implementation q.all and its the same case

var xyzdeffered = $q.defer();
service1.getServiceDetail1($routeParams.id).then(function(promise) {
    xyzdeffered.resolve(promise);
});

var abcdeffered = $q.defer();
service2.getServiceDetail2($routeParams.id).then(function(promise) {
abcdeffered.resolve(promise);
});


$q.all([ xyzdeffered, abcdeffered ]).then(function(data) {

    $scope.variable = data;

});

I am expecting the variable in q.all should get populated only after the first two promises are resolved. But unfortunately the service call itself doesn’t get returned with data and the control moves on to the q.all. I find this weird because as per documentation the q.all is called only when your promises are returned with 200 response and are resolved.
I checked analysing the network calls and also put some alert to see the sequence of the code and find that the q.all alert is the first alert to be popped up and then the other promises are resolved.
Its really making me mad as why a simple implementation of q.all doesnt work..
Any help will be appreciated.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Why not directly call $q.all on first promise ?

$q.all([
    service1.getServiceDetail1($routeParams.id),
    service2.getServiceDetail2($routeParams.id)
]).then(function(data) {
    //Array of result [resultOfgetServiceDetails1, resultOfgetServiceDetails2]
    $scope.variable = data;
});

Method 2

You need to reference the promise on the $q.defer() return object:

$q.all([ xyzdeffered.promise, abcdeffered.promise ])

Method 3

For example you have you run multiple sq-lite queries synchronously just pass the array of queries(you can pass anything) as args into the call of this method.

function methodThatChainsPromises(args,tx) {

    var deferred = $q.defer();

    var chain = args.map(function(arg) {

        var innerDeferred = $q.defer();

        tx.executeSql(arg,[], function(){    
            console.log("Success Query");
            innerDeferred.resolve(true);
        }, function(){
            console.log("Error Query");
            innerDeferred.reject();
        });

        return innerDeferred.promise;
    });

    $q.all(chain).then(
        function(results) {
            deferred.resolve(true)
            console.log("deffered resollve"+JSON.stringify(results));
        }, function(errors) {
              deferred.reject(errors);
              console.log("deffered rejected");
           });
           return deferred.promise;
        }

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply