Angular.JS multiple $http post: canceling if one fails

Question

I am new to angular and want to use it to send data to my app's backend. In several occasions, I have to make several http post calls that should either all succeed or all fail. This is the scenario that's causing me a headache: given two http post calls, what if one call succeeds, but the other fails? This will lead to inconsistencies in the database. I want to know if there's a way to cancel the succeeding calls if at least one call has failed. Thanks!

Answer 1

Without knowing more about your specific situation I would urge you to use the promise error handling if you are not already doing so. There's only one situation that I know you can cancel a promise that has been sent is by using the timeout option in the $http(look at this SO post), but you can definitely prevent future requests. What happens when you make a $http call is that it returns a promise object(look at $q here). What this does is it returns two methods that you can chain on your $http request called success and failure so it looks like $http.success({...stuff...}).error({...more stuff..}). So if you do have error handling in each of these scenarios and you get a .error, dont make the next call.

Answer 2

You can cancel the next requests in the chain, but the previous ones have already been sent. You need to provide the necessary backend functionality to reverse them.

If every step is dependent on the other and causes changes in your database, it might be better to do the whole process in the backend, triggered by a single "POST" request. I think it is easier to model this process synchronously, and that is easier to do in the server than in the client.

However, if you must do the post requests in the client side, you could define each request step as a separate function, and chain them via then(successCallback, errorCallback) (Nice video example here: https://egghead.io/lessons/angularjs-chained-promises).

In your case, at each step you can check if the previous one failed an take action to reverse it by using the error callback of then:

var firstStep = function(initialData){
  return $http.post('/some/url', data).then(function(dataFromServer){
    // Do something with the data
    return {
      dataNeededByNextStep: processedData,
      dataNeededToReverseThisStep: moreData
    }
  });
};
var secondStep = function(dataFromPreviousStep){
  return $http.post('/some/other/url', data).then(function(dataFromServer){
    // Do something with the data
    return {
      dataNeededByNextStep: processedData,
      dataNeededToReverseThisStep: moreData
    }
  }, function(){
    // On error
    reversePreviousStep(dataFromPreviousStep.dataNeededToReverseThisStep);
  });
};
var thirdFunction = function(){ ... };

...

firstFunction(initialData).then(secondFunction)
                          .then(thirdFunction)
                          ...

If any of the steps in the chain fails, it's promise would fail, and next steps will not be executed.