Angularjs what is the differences of handling ajax from success/error and promise?

Question

I'm not sure where I should handle the response of my ajax request.

There are 2 flavours.

handle via success/error callback from $http.
handle via then() method from promise result.

Both responds as expected. But, I suppose that there is a 'catch' where to use each one. Google didn't show me the way. And angular.js source code is kinda... cryptic for me.

Notice: My example (1) always responds first and then (2) responds next. I think is just because localhost latency is nearly null and they both are async method.

$http({
    method: 'POST',
    url: 'ping.php',
    headers: {'content-type' : 'application/json'}
}).
success(function(data, status, headers, config) {
    console.log("Flavour one success");
}).
error(function(data, status, headers, config) {
    console.log("Flavour one error");                       
}).then(function() { 
    console.log("Flavour two success"); }, 
        function() { console.log("Flavour two error");

});

My google [results](http://stackoverflow.com/questions/14127703/asynchronous-javascript-callbacks-vs-deferred-promise) and [another](http://blog.parse.com/2013/01/29/whats-so-great-about-javascript-promises/) — CBIII, Jul 31 '13 at 17:46
@ClydeByrdIII He's not asking about the difference between callbacks and promises. He's asking about the difference between the `success`, `error`, and `then` functions. — Lukas, Jul 31 '13 at 17:49
Possible duplicate of "http://stackoverflow.com/questions/16385278/angular-httppromise-difference-between-success-error-methods-and-thens-a — CBIII, Jul 31 '13 at 17:53

score 3 · Answer 1 · answered Jul 31 '13 at 18:01

There are some benefits to using promises over your basic success/error callbacks. One benefit is that you can chain them as described here.

Chaining promises Because calling the then method of a promise returns a new derived promise, it is easily possible to create a chain of promises:

promiseB = promiseA.then(function(result) {
  return result + 1;
});

// promiseB will be resolved immediately after promiseA is resolved and its value
// will be the result of promiseA incremented by 1`

It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs like $http's response interceptors.

You can also combine multiple promises using $q.all(). This can be really helpful when bootstrapping an application that depends on multiple resources to be loaded before continuing on.

But don't `success` and `error` return promises as well? (Look at the original post... that's what he's doing.) — Lukas, Jul 31 '13 at 18:07
Kind of... $http returns a promise with "two $http specific methods: success and error". http://docs.angularjs.org/api/ng.$http#generalusage — Brian Lewis, Jul 31 '13 at 18:18
@MariusSoutier You can't chain multiple `success` and `error` calls, but you can chain `then` calls FROM a `success` or `error` call. — Lukas, Jul 31 '13 at 21:17

score 1 · Accepted Answer · answered Jul 31 '13 at 17:47

According to the Angular documentation,

{HttpPromise} – Returns a promise object with the standard then method and two http specific methods: success and error. The then method takes two arguments: a success and an error callback which will be called with a response object. The success and error methods take a single argument - a function that will be called when the request succeeds or fails respectively.

To answer your question, the only difference is that success and error only take one argument, whereas then takes two arguments.

The first will always be invoked before the second, simply because you've listed it in that order, and that's how promises work. If you had listed another then, then it would be invoked third.

Angularjs what is the differences of handling ajax from success/error and promise?

2 Answers2