$q.all() in angular does not resolve well

Question

I am doing 3 $http calls in a factory and I am in troubles.

I declare 4 promises:

var promise = $q.defer(),
  PBdeferred = $q.defer(),
  Rdeferred = $q.defer(),
  Pdeferred = $q.defer();

After that I do the first call to the API

$http.get('/pendingBills').then(function(response) {
  var PendingBills = ['id', 'path', 'reservas', 'importe', 'fecha'];
  PBdeferred.resolve(PendingBills);
});

And for now resolve the last 2 promises with an empty array (I have not the endopoint yet)

  Rdeferred.resolve([]);
  Pdeferred.resolve([]);

There is where I use $q.all

$q.all([PBdeferred, Rdeferred, Pdeferred]).then(function (results){
    console.log('Results', results);
    promise.resolve({
      PendingBills: results[0],
      Remittances: results[1],
      Payed: results[2]
    });
  });

And return the higth level promise

return promise.promise;

The console log shows the promises but I thougth that in there point the promises are resolved.

Some idea for fix this?

Avoid the [deferred antipattern](http://stackoverflow.com/q/23803743/1048572)! `$http.get` already returns a promise — Bergi, Aug 19 '15 at 15:41

score 4 · Answer 1 · answered Aug 19 '15 at 15:30

4

You're not using $q.all correctly. It takes an array (or object) of promises, not an array of deferreds.

Change

$q.all([PBdeferred, Rdeferred, Pdeferred])

to

$q.all([PBdeferred.promise, Rdeferred.promise, Pdeferred.promise])

answered Aug 19 '15 at 15:30

pablochan

5,625
27
42

so easy.. I have done the same with the last promise... THANKS! – JomsDev Aug 19 '15 at 15:40
1

… and he's not using deferreds correctly at all, so rather get to the root of the problem! – Bergi Aug 19 '15 at 15:40
@Bergi: It did cross my mind, but I don't have the time to expand the answer right now. – pablochan Aug 19 '15 at 15:41
@pablochan: OriDrori did :-) – Bergi Aug 19 '15 at 15:43

Ori Drori · Accepted Answer · 2015-08-19T17:23:52.550

You are not using promises correctly, as you use deferred which is an anti pattern that breaks the promises chain. Instead of using deferred, just get the promise for each of your actions, then combine them using $q:

var PBpromise = $http.get('/pendingBills').then(function(response) {
  return ['id', 'path', 'reservas', 'importe', 'fecha']; // this will return a promise with the array as the resolve value
});

var Rpromise = $q.resolve(); // a promise that is resolved immediately. Later you can replace it with the $http call 

var Ppromise = $q.resolve(); // a promise that is resolved immediately. Later you can replace it with the $http call 

var promise = $q.all([PBdpromise, Rpromise, Ppromise]).then(function (results){ // $q.all also returns a promise
    console.log('Results', results);
    return { // this will be the resolve value of the returned $q promise
      PendingBills: results[0],
      Remittances: results[1],
      Payed: results[2]
    };
  });

Note that $q.resolve() is only available since angular 1.4. If you use a prior version, use $q.when({}) instead of $q.resolve().

$q.all() in angular does not resolve well

2 Answers2