AngularJS - Handling $http errors?

Question

I have a directive that I am injecting a service into that makes $http calls to a back end service.

How do you handle 404/401/HTTP errors in general? I am looking for a best practice pattern.

Does $http gobble up and reject the promise when it hits a HTTP error?

This is what I have so far, and it seems to work OK, but I am not sure I am doing the recommended way:

Service

app.service('helpService', ['$http', function ($http) {
    return {
        getHelpUrl: function (pageUrl) {
            return $http.post('Home/GetHelpUrl', { pageUrl: pageUrl });
        }
    }
}]);

Directive

app.directive('helpLink', ['$location', 'helpService', function ($location, helpService) {
    return {
        restrict: 'A',
        replace: true,
        scope: {},
        template: function (elem, attrs) {
            return '<a ng-href="{{helpUrl}}" ng-show="showLink" target="_blank">Help?</a>';
        },
        link: function (scope, elem, attrs) {
            scope.showLink = false;

            helpService.getHelpUrl($location.path()).success(function (data) {
                scope.helpUrl = data.helpUrl;
                scope.showLink = true;
            });
        }
    }
}]);

Chandermani · Accepted Answer · 2013-12-14 07:24:13Z

1

Like the success method there is also a error(function(data, status, headers, config) method defined over $http.

This is example from the documentation

$http({method: 'GET', url: '/someUrl'}).
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

You can use it to catch errors

answered Dec 14, 2013 at 7:24

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

calebboyd · Accepted Answer · 2013-12-14 04:06:44Z

1

If you are wanting to capture all the errors You might look in to Interceptors. Have a look at the documentation. You could also use the error callback in your .then method. (this would replace your .success method) since $http returns a promise (see $q promise api):

The interceptor could be registered something like:

app.config(function($httpProvider){
    $httpProvider.interceptors.push('connectionInterceptor');
});

app.factory('connectionInterceptor', function ($q) {
    return {
        'requestError':function(rejection){
             //do something general (global)
             //send a rejection
        },
        'responseError': function (response) {
             //do something general (global)
             //send a rejection
        }
    };
});

edited Dec 14, 2013 at 4:06

answered Dec 14, 2013 at 3:40

calebboyd

5,7332 gold badges25 silver badges32 bronze badges

2 Comments

Sam Over a year ago

in the .then are you saying using it like so: .then(function(successResult){}, function(errorResult){});?

calebboyd Over a year ago

Yep, see this link ('Returns' section right above 'Methods') for the object structure of successResult and errorResult

Collectives™ on Stack Overflow

AngularJS - Handling $http errors?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related