Angular - How to properly handle an HTTP error from server?

Question

Currently I've got this:

$http({
    method: 'POST',
    url: 'http://api-endpoint/somescript/',
    data: formData,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})
.then(function (response) {
    console.log(response);
});

If the script on the other end works out ok, then gets called. However, let's say the script on the server end has some sort of error that's not properly caught. If I make up an error by tossing in some garbage call like asdfasdf(), the then function isn't called, and instead I get this in the browser console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://api-endpoint/somescript/. (Reason: CORS
header 'Access-Control-Allow-Origin' missing).

How do I catch this in the Angular code so I can handle it in a user-friendly manner?

EDIT: This is not a duplicate, as it is specific to Angular.

Matt · Accepted Answer · 2015-06-10 23:32:24Z

1

The $q.then() method accepts three function parameters, the first being the handler for a successful callbacks, the second being for errors, and the third being for notify. $http leverages $q behind the scenes so this thenable should behave like the documentation suggests.

To handle errors in the above code, just toss in an additional function for error handling as such:

.then(function (response) {
    console.log(response);
}, function(response) {
    console.log(response);
});

Feel free to browse the $q documentation, specifically The Promise API, for additional details.

answered Jun 10, 2015 at 23:32

Matt

1,0338 silver badges16 bronze badges

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

3 Comments

CaptSaltyJack Over a year ago

Thank you! It seemed wrong to add all that interceptor code for something so simple.

Matt Over a year ago

@CaptSaltyJack No problem, glad this helped and I hope it can help others as well :)

Nikhil Aggarwal Over a year ago

@CaptSaltyJack - Well, I do not agree with you. It will look more wrong if you have 100s of API's and you have to write the second function every where. So, generic handling is the best thing that we can do our code. Though, in your case you had only 1 API as of now in which you want to do error handling, so this second function solution fits well.

Nikhil Aggarwal · Accepted Answer · 2015-06-10 19:29:46Z

1

To handle this, we will have to add a service/factory to intercept http calls. You can do it like this in your config

$httpProvider.interceptors.push('httpRequestInterceptor');

Now, the above service will be something like this

angular.module("app").factory('httpRequestInterceptor', function ($q) {

            return {
                'request': function (config) {

                    // Extract request information
                    return config || $q.when(config);
                },
                'responseError': function(rejection) {

                    // Extract response error information and handle errors
                    return $q.reject(rejection);
                 }
             }
        });

answered Jun 10, 2015 at 19:29

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

7 Comments

Nikhil Aggarwal Over a year ago

@CaptSaltyJack - Did you checked? Will it work for you?

CaptSaltyJack Over a year ago

Wow, that's a lot of work for something so simple. I don't know if this will work for me. I need the error handling to be within a specific controller, because the error handling needs to be specific to a certain page.

Nikhil Aggarwal Over a year ago

Within specific controller will mean specific route/state too?

CaptSaltyJack Over a year ago

Correct, a specific route and controller.

Nikhil Aggarwal Over a year ago

You can place a check in the factory for your route and if you are using ui-router then state will be the best thing to use

|

Collectives™ on Stack Overflow

Angular - How to properly handle an HTTP error from server?

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related