I have a function which makes web service calls to my server and returns an array of promises.

However some of these calls might work while others might not. The way my function is currently set up, if one of them fails, it alerts that the entire thing failed. If I'm making 5 calls, 1 might fail. I need to log this correctly and I'm not sure how to do it.

An ideal response/log would be:

1. call 1 passed
2. call 2 passed
3. call 3 passed
4. call 4 failed - reason
5. call 5 passed

Right now the whole thing will return "The handle user operation failed" because call 4 failed.

Function:

var manageGroup = function (add, group, users){

    var deffered = $q.defer();
    var arrPromises = [];
    var promiseIndex = arrPromises.length;
    var usersLength = users.length;
    var operation = add ? "AddUserToGroup" : "RemoveUserFromGroup";
    var actionText = add ? "Added: " : "Removed: "
    var actionText2 = add ? " to " : " from "

    //Apply operation on selected groups
    for (var i = 0; i < usersLength; i++){
        arrPromises[i] = $().SPServices({
            operation: operation,
            groupName: group.name,
            userLoginName: users[i].domain
        });      
    }

    $q.all(arrPromises).then(
        function (){
            //when promises are finsihed
            for (var i = 0; i < usersLength; i++){
                console.log(actionText + users[i].name + actionText2  + group.name);
            };
            deffered.resolve();
        },
        //function incase of AJAX failure
        function (){
            alert('The handle user operation failed.');
        }
    ) 
    return deffered.promise;      
}

I tried to handle the promises individually instead of using the $q.all but now I'm not getting anything in the log:

I took this section out:

/*$q.all(arrPromises).then(
    function (){
        //when promises are finsihed
        for (var i = 0; i < usersLength; i++){
            console.log(actionText + users[i].name + actionText2  + group.name);
        };
        deferred.resolve();
    },
    //function incase of AJAX failure
    function (){
        alert('The handle user operation failed.');
    }
) */

Introduced this instead:

for (var i = 0; i<promiseIndex; i++){
    arrPromises[i].then(
        function (){
            console.log(actionText + user[i].name + actionText2 + group.name);
        }
    ),
    function (){
        alert('Failed to add/remove'+  user[i].name + ' to ' + group.name)
    }
}

$q.all(arrPromises).then(function (){
    deferred.resolve();
}, function (){
    deferred.reject();
})

I have a function which makes web service calls to my server and returns an array of promises.

However some of these calls might work while others might not. The way my function is currently set up, if one of them fails, it alerts that the entire thing failed. If I'm making 5 calls, 1 might fail. I need to log this correctly and I'm not sure how to do it.

An ideal response/log would be:

1. call 1 passed
2. call 2 passed
3. call 3 passed
4. call 4 failed - reason
5. call 5 passed

Right now the whole thing will return "The handle user operation failed" because call 4 failed.

Function:

var manageGroup = function (add, group, users){

    var deffered = $q.defer();
    var arrPromises = [];
    var promiseIndex = arrPromises.length;
    var usersLength = users.length;
    var operation = add ? "AddUserToGroup" : "RemoveUserFromGroup";
    var actionText = add ? "Added: " : "Removed: "
    var actionText2 = add ? " to " : " from "

    //Apply operation on selected groups
    for (var i = 0; i < usersLength; i++){
        arrPromises[i] = $().SPServices({
            operation: operation,
            groupName: group.name,
            userLoginName: users[i].domain
        });      
    }

    $q.all(arrPromises).then(
        function (){
            //when promises are finsihed
            for (var i = 0; i < usersLength; i++){
                console.log(actionText + users[i].name + actionText2  + group.name);
            };
            deffered.resolve();
        },
        //function incase of AJAX failure
        function (){
            alert('The handle user operation failed.');
        }
    ) 
    return deffered.promise;      
}

I tried to handle the promises individually instead of using the $q.all but now I'm not getting anything in the log:

I took this section out:

/*$q.all(arrPromises).then(
    function (){
        //when promises are finsihed
        for (var i = 0; i < usersLength; i++){
            console.log(actionText + users[i].name + actionText2  + group.name);
        };
        deferred.resolve();
    },
    //function incase of AJAX failure
    function (){
        alert('The handle user operation failed.');
    }
) */

Introduced this instead:

for (var i = 0; i<promiseIndex; i++){
    arrPromises[i].then(
        function (){
            console.log(actionText + user[i].name + actionText2 + group.name);
        }
    ),
    function (){
        alert('Failed to add/remove'+  user[i].name + ' to ' + group.name)
    }
}

$q.all(arrPromises).then(function (){
    deferred.resolve();
}, function (){
    deferred.reject();
})

• javascript
• angularjs

• You're not using jQuery's Deferred, do you? What is $q.all, Angular's Q promise implementation? – Bergi Commented Feb 5, 2014 at 16:58
• Yes my mistake, it's angular's implementation of promises. I'm updated the tag. – Batman Commented Feb 5, 2014 at 17:00
• possible duplicate of AngularJS: $q wait for all even when 1 rejected – Bergi Commented Feb 5, 2014 at 17:02
• Not a duplicate from what I can tell. He's talking about waiting for all promises to resolve. I'm asking how to I handle each promise individually. – Batman Commented Feb 5, 2014 at 17:29
• Q and bluebird give a method called allSettled or settle. It gives you exactly that: once all the promises are finished (resolved or rejected), it's called with a list of these promises, and their state. – Florian Margaine Commented Feb 5, 2014 at 17:38

3 Answers 3

Q (on which ng.$q is based on) or bluebird have a method fulfilling exactly your needs.

For bluebird, you'd go this way:

var Promise = require('bluebird');

Promise.settle(arrPromises).then(function(promises) {
    promises.forEach(function(p) {
        if (promise.isRejected()) {
            // it's a rejected promise.
        }
        else {
            // it's a resolved promise.
        }
    });
});

And for Q, you'd go this way:

var Q = require('q');

Q.allSettled(arrPromises).then(function(promises) {
    promises.forEach(function(p) {
        if (p.state === 'fulfilled') {
            // it's a resolved promise.
        }
        else {
            // it's a rejected promise.
        }
    });
});

The nice thing about both these libraries is that they're pliant with the Promises/A+ specification. Which means you can take off ng.$q, put one of these, and your current code will still work.

It seems that you're having an issue with one ajax call failure causing an overall failure of all(). You could just catch the failure of the individual AJAX calls and resolve the corresponding promise with a value of your choosing. Here, I am just using an empty string.

Live demo (click).

Keep in mind, this is just sample code to demonstrate the point.

  //store promises to use for all()
  var promises = [];

  //loop for ajax calls
  for (var i=0; i<3; ++i) {
    //new deferred for each call
    var deferred = $q.defer();
    //cache the promise
    promises[i] = deferred.promise;
    //use another function to avoid unwanted variable increment
    makeCall(deferred, i);
  }

  $q.all(promises).then(function(allData) {
    console.log(allData);
  });

  function makeCall(deferred, i) {
    //make the ajax call
    $http.get('file'+i+'.txt').then(function(resp) {
      console.log('Call '+i+' returned.');
        //resolve the promise with ajax data if successful
        deferred.resolve(resp.data);
    }, function() {
      //resolve with something else on failure
      deferred.resolve('');
    });
  }

I tried to handle the promises individually instead of using the $q.all but now I'm not getting anything in the log

You seem to have fallen for the classical closure-in-a-loop problem, with your i variable having the wrong value when the callback is executed. Instead, use this:

for (var i = 0; i<promiseIndex; i++) (function(i) {
    arrPromises[i].then(function() {
        console.log(actionText + user[i].name + actionText2 + group.name);
    }, function( ){
        alert('Failed to add/remove'+  user[i].name + ' to ' + group.name)
    });
})(i);

Also you had mismatched parenthesis in the then call, essentially not passing the error handler.

Now, each promise is handled individually; yet their order is not persisted. For that, you will need to use some kind of all, have a look at @Florian's answer.

Also notice that there's no reason to use that deffered explicitly. Just return $q.all(arrPromises)! Manually resolving deferreds and returning their promise is cumbersome and error-prone - in your original code you simply forgot to reject it in case of an error. Don't use this when you already have promises and can use binators on them.