According to AngularJS doc, calls to $http
return the following:
Returns a promise object with the standard then
Official Notice: success and error have been deprecated, please use the standard then method instead.
Deprecation Notice: The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.
link: https://code.angularjs.org/1.5.7/docs/api/ng/service/$http
screenshot: view the screenshot
.then() is chainable and will wait for previous .then() to resolve.
.success() and .error() can be chained, but they will all fire at once (so not much point to that)
.success() and .error() are just nice for simple calls (easy makers):
$http.post('/getUser').success(function(user){
...
})
so you don't have to type this:
$http.post('getUser').then(function(response){
var user = response.data;
})
But generally i handler all errors with .catch():
$http.get(...)
.then(function(response){
// successHandler
// do some stuff
return $http.get('/somethingelse') // get more data
})
.then(anotherSuccessHandler)
.catch(errorHandler)
If you need to support <= IE8 then write your .catch() and .finally() like this (reserved methods in IE):
.then(successHandler)
['catch'](errorHandler)
Working Examples:
Here's something I wrote in more codey format to refresh my memory on how it all plays out with handling errors etc:
http://jsfiddle.net/nalberg/v95tekz2/
There are some good answers here already. But it's worthwhile to drive home the difference in parallelism offered:
success()
returns the original promisethen()
returns a new promiseThe difference is then()
drives sequential operations, since each call returns a new promise.
$http.get(/*...*/).
then(function seqFunc1(response){/*...*/}).
then(function seqFunc2(response){/*...*/})
$http.get()
seqFunc1()
seqFunc2()
success()
drives parallel operations, since handlers are chained on the same promise.
$http(/*...*/).
success(function parFunc1(data){/*...*/}).
success(function parFunc2(data){/*...*/})
$http.get()
parFunc1()
, parFunc2()
in parallelSome code examples for simple GET request. Maybe this helps understanding the difference.
Using then
:
$http.get('/someURL').then(function(response) {
var data = response.data,
status = response.status,
header = response.header,
config = response.config;
// success handler
}, function(response) {
var data = response.data,
status = response.status,
header = response.header,
config = response.config;
// error handler
});
Using success
/error
:
$http.get('/someURL').success(function(data, status, header, config) {
// success handler
}).error(function(data, status, header, config) {
// error handler
});
Just for completion, here is a code example indicating the differences:
success \ error:
$http.get('/someURL')
.success(function(data, status, header, config) {
// success handler
})
.error(function(data, status, header, config) {
// error handler
});
then:
$http.get('/someURL')
.then(function(response) {
// success handler
}, function(response) {
// error handler
})
.then(function(response) {
// success handler
}, function(response) {
// error handler
})
.then(function(response) {
// success handler
}, function(response) {
// error handler
}).
NB This answer is factually incorrect; as pointed out by a comment below, success() does return the original promise. I'll not change; and leave it to OP to edit.
The major difference between the 2 is that .then()
call returns a promise (resolved with a value returned from a callback) while .success()
is more traditional way of registering callbacks and doesn't return a promise.
Promise-based callbacks (.then()
) make it easy to chain promises (do a call, interpret results and then do another call, interpret results, do yet another call etc.).
The .success()
method is a streamlined, convenience method when you don't need to chain call nor work with the promise API (for example, in routing).
In short:
.then()
- full power of the promise API but slightly more verbose.success()
- doesn't return a promise but offeres slightly more convienient syntax