Angular JS success works but not then, why?

Question

Please refer - http://jsfiddle.net/U3pVM/18728/

var app = angular.module("myapp", []);
app.controller("mycontroller", function($scope, $http, $timeout) {
    var url = "http://www.dummyurl.com";
    $http.get(url).success(
        function(response) {
              $scope.items = response;
    });
});

In Angular JS, I am making an ajax call using $http service. the data is getting populated using "success" callback, whereas it is not getting populated using "then" callback. I have 2 questions -

1) What is the difference between success and then? 2) When to use "then", and when to "success"?

http://stackoverflow.com/questions/16385278/angular-httppromise-difference-between-success-error-methods-and-thens-a — Nazrul Islam, Sep 19 '15 at 14:49
Please confirm with a link which says that success is going to be deprecated. — anand patil, Sep 19 '15 at 15:09

Michel · Accepted Answer · 2015-09-19T15:27:05.013

What is the difference between success and then?

then resolves an object that represents your http response. That is to say, the callback of the then method take only one argument that has the following structure:

data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

On the other hand, success is a shorthand function that will spread the different properties of the http response (except the statusText that is not very useful) into different arguments. Therefore the first argument of the success callback will contain only the response body (the property response.data) of the http response.

The following piece of code is taken from angular 1.4.5, and I was able to find it since angular 1.0.0:

promise.success = function(fn) {
   promise.then(function(response) {
      fn(response.data, response.status, response.headers, config);
   });
   return promise;
};

When to use "then", and when to "success"?

For consistency with other promise libraries, I'll advise you to always use the standard then method. If you replace $http.success with $http.then be careful that what you got in the response object in the former, is equivalent to response.data in the latter:

$http.get(...).success(function (response) {
    return response;
}

is equivalent to:

$http.get(...).then(function (response) {
    return response.data;
}

I meant that when you use `success`, the first argument of the callback is the http response body, whereas when you use `then`, the first argument is an object that represents the whole http response, with headers, statusCode, ... Will edit to make that more clear. — Michel, Sep 19 '15 at 15:13
One query, I see that success return original promise, whereas then return new promise. and i am confused! what does it even mean, a js fiddle kinda explanation would be really helpful — anand patil, Sep 19 '15 at 15:17

score 2 · Answer 2 · answered Sep 19 '15 at 14:50

2

use success

$http.get(url)
  .success(function(response) {
    $scope.items = response;
  });
});

use then

$http.get(url)
  .then(function(data){
     $scope.items = data.data
   });

I think the different is the content of the passing parameter

answered Sep 19 '15 at 14:50

Rodson

566
4
10

I would swap names of parameters in success and then callbacks. You get response in 'then' function and data in 'success' function. – Borneo777 Dec 19 '19 at 08:53

score 0 · Answer 3 · answered Sep 19 '15 at 14:47

0

From what I understand, I mainly use success when I am querying api or other databases. Then is mainly used when you request data from own database. This is my usage and what I saw others use.

answered Sep 19 '15 at 14:47

1729

175
2
18

Angular JS success works but not then, why?

3 Answers3