AngularJS then () behaves differently than success () - error ()

Question

Since the success() and error() functions are deprecated in AngularJS, I update my codes, replacing them with then() . Now, according to my understanding, these two parts of the codes should behave the same:

 $http .get(/* some params */) .success(function() { // success cases here }) .error(function() { // error cases here }); 

AND

 $http .get(/* some params */) .then(function() { // success cases here }, function() { // error cases here }); 

But in some cases I have a different behavior. Can you explain to me why this happened, and more importantly, what would be the way to guarantee identical behavior using the then() functions?

Answer 1

The .success and .error methods ignore return values .
Therefore, they are not suitable for the chain .

 var httpPromise = $http .get(/* some params */) .success(function onSuccess(data, status, headers, config) { var modifiedData = doModify(data); //return value ignored return modifiedData; }) .error(function onError(data, status, headers, config) { // error cases here }); httpPromise.then(function onFullfilled(response) { //chained data lost //instead there is a response object console.log(response.data); //original data console.log(response.status); //original status }); 

On the other hand, the .then and .catch return a derived promise that is suitable for a chain of returned (or discarding) values ​​or from a new promise.

 var derivedPromise = $http .get(/* some params */) .then(function onFulfilled(response) { console.log(response.data); //original data console.log(response.status); //original status var modifiedData = doModify(response.data); //return a value for chaining return modifiedData; }) .catch(function onRejected(response) { // error cases here }); derivedPromise.then(function onFullfilled(modifiedData) { //data from chaining console.log(modifiedData); }); 

Response Object Against Four Arguments

Also note that the $http service provides four arguments (data, status, headers, config) when calling the function provided by the .success and .error methods.

The $q service provides one argument (response) to the functions provided by the .then or .catch . In the case of promises created by the $http service, the response object has the following properties: ¹

• data - {string | Object} is the response body transformed using the conversion functions.
• status - {number} - The HTTP status code for the response.
• headers - {function ([headerName])} - the function of the header receiver.
• config - {Object} - the configuration object that was used to generate the request.
• statusText - {string} - response text of the HTTP response.

Chain promises

Since calling the then method of the promise returns a new derived promise, it's easy to chain from promises. You can create chains of any length, and since a promise can be resolved using another promise (which will delay its further resolution), you can pause / delay the resolution of promises at any point in the chain. This allows you to implement powerful APIs. ²

Answer 2

The important difference is that you should use .then().catch() instead of .then(function(), function()) . [1] Then two arguments (where the second function is the error handler) does not fix errors in the first function, as I understand it. IOW: $http.get().then(a, b) will not call b () if a () throws an error, where as $http.get().then(a).catch(b) will be.

What other types of behavior do you get?

1: standardized Promise API - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 3

The success function and the promising callback really get different objects. As described in docs , a promise callback receives a response object containing status, headers, data, etc. The success function returns only the data field (response body) of this object.