$q.all with nested promise also created with $q.all

Question

The following function tries to return a promise that will only resolve when all the async HTTP calls have finished:

$scope.saveThat = function () {
    var promises = [];

    for (var i = 0; i < array.length; i++) {
        var newPromise = $q.defer();
        promises.push(newPromise);

        // some more code...

        (function (i, newPromise) {
            $http(httpData)
                .success(function (response) {
                    newPromise.resolve('Success');
                })
                .error(function (response) {
                    newPromise.reject('Error');
                });
        })(i, newPromise);

    }
    return $q.all(promises);
};

And the following snippet calls this function.

// save this...
var promise1 = $rootScope.saveThis(result.Person);
promise1.then(function (success) {
    }, function (error) {
        saveErrorMessage += 'Error saving this: ' + error + '.';
    });

// save that...
var promise2 = $rootScope.saveThat(result.Person);
promise3.then(function (success) {
    }, function (error) {
        saveErrorMessage += 'Error saving that: ' + error + '.';
    });

// wait until all promises resolve
$q.all([promise1, promise2])
.then(
    function (success) {
        $scope.$emit(alertEvent.alert, { messages: 'Saved successfully!', alertType: alertEvent.type.success, close: true });
    }, function (error) {
        $scope.$emit(alertEvent.alert, { messages: saveErrorMessage, alertType: alertEvent.type.danger });
    });

The problem I have is that the second promise ($q.all([promise1, promise2])) resolves even when the promises in promise2 haven't resolved yet.

Stop using the [deferred antipattern](http://stackoverflow.com/q/23803743/1048572) and your problems will go away. — Bergi, Nov 01 '15 at 21:18
@Bergi, thanks so much for that! Yeah, i'm definitely new to promises — Maria Ines Parnisari, Nov 01 '15 at 21:40

Pankaj Parkar · Accepted Answer · 2015-11-01T21:29:22.043

1

Because you are not creating an array of promise, Actually it contains a $q.defer() object. You should be using

promises.push(newPromise.promise);

instead of

promises.push(newPromise);

Also you need to avoid those anti-pattern, because you are creating $q object unnecessarily as you have promise object there which returned from the $http.get.

Code

$scope.saveThat = function() {
    var promises = [];
    for (var i = 0; i < array.length; i++) {
      // some more code...
      var promise = $http(httpData)
        .then(function(response) {
          return 'Success'; //returning data from success resolves that promise with data
        }, function(response) {
          return 'Error'; //returning data from error reject that promise with data
        });
      promises.push(promise); //creating promise array
    }
    return $q.all(promises); //apply $q.all on promise array
};

edited Nov 01 '15 at 21:29

answered Nov 01 '15 at 21:16

Pankaj Parkar

134,766
23
234
299

Where are you using the `proimise` variable? Where are you initializing `newPromise`? – Maria Ines Parnisari Nov 01 '15 at 21:28
1

@miparnisari that was my bad..copy paste mistake.look at mine edit – Pankaj Parkar Nov 01 '15 at 21:29
1

Ah I thought so :) thanks for your help, I'll try what you said and let you know. – Maria Ines Parnisari Nov 01 '15 at 21:33
One last question, instead of `return 'Error';` can I write `return 'some custom error message;'` and capture that? – Maria Ines Parnisari Nov 01 '15 at 22:02
@miparnisari: You rather should do `throw new Error("custom message "+response)` so that the promise will get rejected – Bergi Nov 01 '15 at 22:08
@miparnisari yes you could do that..but Bergi has already mentioned a better way than that.. – Pankaj Parkar Nov 01 '15 at 22:16

$q.all with nested promise also created with $q.all

1 Answers1