CODEWITHSUNDEEP
javascriptangularjspromiseangular-promiseangularjs-http
Maria Ines Parnisari
Maria Ines Parnisari

Reputation: 17466

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

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.

Upvotes: 1

Views: 1129

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

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
};

Upvotes: 1

Related Questions