AngularJS: Chaining promises ignore rejection - angularjs

Question

I'm new to AngularJS and I would like to know why does AngularJS keeps going on the next chaining operation even if one of my previous chaining functions fails.
// Manipulate data
function manipulationData(data) {
return data.total + 2;
}
/*
* Begin chaining promises
*/
var deferred = $q.defer();
// JSON Request
$http.get('/json_test.json')
// If results is ok, then manipulate some data
.then(function(results) {
if(results.status == "ok") {
return manipulationData(results);
} else {
deferred.reject("Some data error");
}
}, function(reason) {
deferred.reject("Error request: " + reason);
})
// If manipulation is success
.then(function(results) {
if(results > 5) {
return $http.get('http://host.com/second');
} else {
deferred.reject("Error! Data is invalid");
}
}, function(reason) {
deferred.reject("Error request: " + reason);
})
.then(function(result){
return $http.get('http://host.com/second');
})
return deferred.promise;
For some reason, the application keeps executing all the function even if one of them failed. I want the operation to stop when the 1st promise is not working.
For example, if second operation failed, it should throw the error "Some data error".
Thank you

Answer 1

It seems to me that you face a problem only when your error condition fires (i.e. results.status is not "ok"), because you don't return anything in this case. When you don't return anything Q will fallback to the current promise (returned by the last function) and as it succeeded the next method will also be called (as the promise it is hooked to is fulfilled). Here is an example how to handle custom errors with Q:
promise.then(function(data) {
if (p(data)) {
return doSomethingAsync(data);
} else {
return $q.reject("Some error...")
}
}).then(function(data) {
doSomething(data); // This will be called only if p(data) was true.
}).catch(function(err) {
console.log(err); // This will be called only if p(data) was false.
})
$q is a normal AngularJS service, so you just need to add it as a parameter. You may also refer to the docs page - https://code.angularjs.org/1.2.12/docs/api/ng.$http

Answer 2

Just from a brief look at your code, there doesn't seem to be any reason to use $q at all (well it will be used indirectly ofc.
// Manipulate data
function manipulationData(data) {
return data.total + 2;
}
// JSON Request
return $http.get('/json_test.json')
// If results is ok, then manipulate some data
.then(function(results) {
if(results.status == "ok") {
return manipulationData(results);
} else {
throw new Error("Some data error");
}
}, function(reason) {
throw new Error("Error request: " + reason);
})
// If manipulation is success
.then(function(results) {
if(results > 5) {
return $http.get('http://host.com/second');
} else {
throw new Error("Error! Data is invalid");
}
}, function(reason) {
//Note: This will give 'Error request: Error request: {reason}'
// in cases where '/json_test.json' failed
throw new Error("Error request: " + reason);
})
.then(function(result){
return $http.get('http://host.com/second');
});
As promises works more like try - catch blocks than one may think, when you handle the error, but don't throw another in the handler, your actually saying you have recovered (Which was not your intention)...
Here is a plunk where you can see that effect if you remove the first block of code that is commented out.
http://plnkr.co/edit/kegH8Ca3O3EjQqGCi143?p=preview
angular.forEach(self.stages, function(stage) {
promise = promise.then(function() {
stage.state = 'progress';
return $timeout(function() {
stage.state = 'done';
if(stage.id == 3) throw Error("Test");
}, 1000, true);
}
// add this code to see that we recover.
//, function(error) {
// stage.state = 'error';
//}
// add this code to see how we re-throw the error
//, function(error) {
// stage.state = 'error';
// throw error;
//}
);
});