118

I'm using $http in AngularJs, and I'm not sure on how to use the returned promise and to handle errors.

I have this code:

$http
    .get(url)
    .success(function(data) {
        // Handle data
    })
    .error(function(data, status) {
        // Handle HTTP error
    })
    .finally(function() {
        // Execute logic independent of success/error
    })
    .catch(function(error) {
        // Catch and handle exceptions from success/error/finally functions
    });

Is this a good way to do it, or is there an easier way?

6 Answers 6

106

Promises are an abstraction over statements that allow us to express ourselves synchronously with asynchronous code. They represent a execution of a one time task.

They also provide exception handling, just like normal code, you can return from a promise or you can throw.

What you'd want in synchronous code is:

try{
  try{
      var res = $http.getSync("url");
      res = someProcessingOf(res);
  } catch (e) {
      console.log("Got an error!",e);
      throw e; // rethrow to not marked as handled
  }
  // do more stuff with res
} catch (e){
     // handle errors in processing or in error.
}

The promisified version is very similar:

$http.get("url").
then(someProcessingOf).
catch(function(e){
   console.log("got an error in initial processing",e);
   throw e; // rethrow to not marked as handled, 
            // in $q it's better to `return $q.reject(e)` here
}).then(function(res){
    // do more stuff
}).catch(function(e){
    // handle errors in processing or in error.
});
8
  • 4
    How would you use success(), error() and finally() combined with catch()? Or do I have to use then(successFunction, errorFunction).catch(exceotionHandling).then(cleanUp);
    – Joel
    May 9, 2014 at 9:54
  • 3
    @Joel generally, you do not want to ever use success and error (prefer .then and .catch instead, you can (and should) omit the errorFunction from the .then use a ccatch like in my code above). May 9, 2014 at 11:36
  • @BenjaminGruenbaum could you elaborate why you suggest to avoid success/error? Also my Eclipse runs amok when it sees the .catch(, so I use ["catch"]( for now. How can I tame Eclipse?
    – Giszmo
    Mar 29, 2015 at 18:43
  • Angular's $http module implementation of the $q library uses .success and .error instead of .then and .catch. However in my tests I could access all properties of the $http promise when using .then and .catch promises. Also see zd333's answer. Jun 2, 2015 at 13:14
  • 3
    @SirBenBenji $q doesn't have .success and .error, $http returns a $q promise with the addition of the success and error handlers - however, these handlers do not chain and should generally be avoided if/when possible. In general - if you have questions it is best to ask them as a new question and not as a comment on an old one. Jun 2, 2015 at 13:16
44

Forget about using success and error method.

Both methods have been deprecated in angular 1.4. Basically, the reason behind the deprecation is that they are not chainable-friendly, so to speak.

With the following example, I'll try to demonstrate what I mean about success and error being not chainable-friendly. Suppose we call an API that returns a user object with an address:

User object:

{name: 'Igor', address: 'San Francisco'}

Call to the API:

$http.get('/user')
    .success(function (user) {
        return user.address;   <---  
    })                            |  // you might expect that 'obj' is equal to the
    .then(function (obj) {   ------  // address of the user, but it is NOT

        console.log(obj); // -> {name: 'Igor', address: 'San Francisco'}
    });
};

What happened?

Because success and error return the original promise, i.e. the one returned by $http.get, the object passed to the callback of the then is the whole user object, that is to say the same input to the preceding success callback.

If we had chained two then, this would have been less confusing:

$http.get('/user')
    .then(function (user) {
        return user.address;  
    })
    .then(function (obj) {  
        console.log(obj); // -> 'San Francisco'
    });
};
1
  • 1
    Also worth noting that success and error are only added to the immediate return of the $http call (not the prototype), so if you call another promise method between them (like, you normally call return $http.get(url) wrapped in a base library, but later decide to toggle a spinner in the library call with return $http.get(url).finally(...)) then you'll no longer have those convenience methods.
    – drzaus
    Nov 30, 2015 at 19:35
40

I think the previous answers are correct, but here is another example (just a f.y.i, success() and error() are deprecated according to AngularJS Main page:

$http
    .get('http://someendpoint/maybe/returns/JSON')
    .then(function(response) {
        return response.data;
    }).catch(function(e) {
        console.log('Error: ', e);
        throw e;
    }).finally(function() {
        console.log('This finally block');
    });
1
  • 3
    Finally doesn't return the response, to my knowledge. Sep 9, 2015 at 17:39
11

What type of granularity are you looking for? You can typically get by with:

$http.get(url).then(
  //success function
  function(results) {
    //do something w/results.data
  },
  //error function
  function(err) {
    //handle error
  }
);

I've found that "finally" and "catch" are better off when chaining multiple promises.

5
  • 1
    In your example, the error handler only handles $http errors. May 9, 2014 at 8:23
  • 1
    Yes, I still need to handle exceptions in the success/error functions as well. And then I need some kind of common handler (where I can set things like loading = false)
    – Joel
    May 9, 2014 at 9:13
  • 1
    You have a brace instead of a parentheses closing off your then() call. Feb 5, 2015 at 10:35
  • 1
    This doesnt work on 404 response errors, only works on .catch() Method
    – elporfirio
    Mar 8, 2017 at 22:32
  • This is the correct answer for handling http errors returned to controllers
    – Leon
    Mar 9, 2019 at 10:08
5

In Angular $http case, the success() and error() function will have response object been unwrapped, so the callback signature would be like $http(...).success(function(data, status, headers, config))

for then(), you probably will deal with the raw response object. such as posted in AngularJS $http API document

$http({
        url: $scope.url,
        method: $scope.method,
        cache: $templateCache
    })
    .success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
    })
    .error(function(data, status) {
        $scope.data = data || 'Request failed';
        $scope.status = status;
    });

The last .catch(...) will not need unless there is new error throw out in previous promise chain.

1
  • 2
    Success/Error methods are deprecated.
    – OverMars
    Feb 3, 2018 at 0:14
-3

I do it like Bradley Braithwaite suggests in his blog:

app
    .factory('searchService', ['$q', '$http', function($q, $http) {
        var service = {};

        service.search = function search(query) {
            // We make use of Angular's $q library to create the deferred instance
            var deferred = $q.defer();

            $http
                .get('http://localhost/v1?=q' + query)
                .success(function(data) {
                    // The promise is resolved once the HTTP call is successful.
                    deferred.resolve(data);
                })
                .error(function(reason) {
                    // The promise is rejected if there is an error with the HTTP call.
                    deferred.reject(reason);
                });

            // The promise is returned to the caller
            return deferred.promise;
        };

        return service;
    }])
    .controller('SearchController', ['$scope', 'searchService', function($scope, searchService) {
        // The search service returns a promise API
        searchService
            .search($scope.query)
            .then(function(data) {
                // This is set when the promise is resolved.
                $scope.results = data;
            })
            .catch(function(reason) {
                // This is set in the event of an error.
                $scope.error = 'There has been an error: ' + reason;
            });
    }])

Key Points:

  • The resolve function links to the .then function in our controller i.e. all is well, so we can keep our promise and resolve it.

  • The reject function links to the .catch function in our controller i.e. something went wrong, so we can’t keep our promise and need to reject it.

It is quite stable and safe and if you have other conditions to reject the promise you can always filter your data in the success function and call deferred.reject(anotherReason) with the reason of the rejection.

As Ryan Vice suggested in the comments, this may not be seen as useful unless you fiddle a bit with the response, so to speak.

Because success and error are deprecated since 1.4 maybe it is better to use the regular promise methods then and catch and transform the response within those methods and return the promise of that transformed response.

I am showing the same example with both approaches and a third in-between approach:

success and error approach (success and error return a promise of an HTTP response, so we need the help of $q to return a promise of data):

function search(query) {
  // We make use of Angular's $q library to create the deferred instance
  var deferred = $q.defer();

  $http.get('http://localhost/v1?=q' + query)
  .success(function(data,status) {
    // The promise is resolved once the HTTP call is successful.
    deferred.resolve(data);              
  })

  .error(function(reason,status) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.error){
      deferred.reject({text:reason.error, status:status});
    }else{
      //if we don't get any answers the proxy/api will probably be down
      deferred.reject({text:'whatever', status:500});
    }
  });

  // The promise is returned to the caller
  return deferred.promise;
};

then and catch approach (this is a bit more difficult to test, because of the throw):

function search(query) {

  var promise=$http.get('http://localhost/v1?=q' + query)

  .then(function (response) {
    // The promise is resolved once the HTTP call is successful.
    return response.data;
  },function(reason) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.statusText){
      throw reason;
    }else{
      //if we don't get any answers the proxy/api will probably be down
      throw {statusText:'Call error', status:500};
    }

  });

  return promise;
}

There is a halfway solution though (this way you can avoid the throw and anyway you'll probably need to use $q to mock the promise behavior in your tests):

function search(query) {
  // We make use of Angular's $q library to create the deferred instance
  var deferred = $q.defer();

  $http.get('http://localhost/v1?=q' + query)

  .then(function (response) {
    // The promise is resolved once the HTTP call is successful.
    deferred.resolve(response.data);
  },function(reason) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.statusText){
      deferred.reject(reason);
    }else{
      //if we don't get any answers the proxy/api will probably be down
      deferred.reject({statusText:'Call error', status:500});
    }

  });

  // The promise is returned to the caller
  return deferred.promise;
}

Any kind of comments or corrections are welcome.

11
  • 2
    Why would you use $q to wrap the promise in a promise. Why not just return the promise that is returned by $http.get()?
    – Ryan Vice
    Jul 18, 2016 at 20:25
  • Because success() and error() wouldn’t return a new promise as then() does. With $q we make our factory to return a promise of data instead of a promise of an HTTP response.
    – Watchmaker
    Jul 20, 2016 at 10:53
  • you response is confusing to me so maybe i'm not explaining myself well. unless you are manipulating the response then you can simply return the promise that $http returns. see this example i just wrote: jsbin.com/belagan/edit?html,js,output
    – Ryan Vice
    Jul 20, 2016 at 21:41
  • 1
    I don't see the value. It feels unnecessary to me and I reject code reviews on my projects that use this approach but if your getting value out of it then you should use it. I've also seen a few promise in angular best practice articles calling out unnecessary wrapping as a smell.
    – Ryan Vice
    Jul 23, 2016 at 12:05
  • 1
    This is a deferred anti-pattern. Read You're Missing the Point of Promises
    – georgeawg
    May 18, 2018 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.