angularjs error handling in ajax request

Question

I want to write an error handling part in my application I use this code below but when error 500 occur its work right but there is a small or maybe big problem and thats the page load at first and after few second error page load , How can i remove this few second and go to error page directly without loading mainpage that release error? is there any way to load html template after execution of its controller?

var interceptor = ['$rootScope', '$q', function (scope, $q) {

        function success(response) {
            return response;
        }

        function error(response) {
            var status = response.status;
            if (status == 500) {
              window.location= "http://www.domain.lan/#!/error";


                return;
            }
             if (status == 403) {

                // window.location = "dashboard";
                return;
            }
            // otherwise
            return $q.reject(responseInterceptors);

        }

        return function (promise) {
            return promise.then(success, error);
        }

    }];
    $httpProvider.responseInterceptors.push(interceptor);

is use $injector.get('$state').go('error'); but it doesnt have any effect on this issue — m hadadi, Jan 10 '15 at 13:15
Why you dont handle such error in $routeProvider / $stateProvider itself. — Pankaj Parkar, Jan 10 '15 at 20:54
Depends when the request error is returned you can't guess an error till is returned, if you run ajax requests when template is loading or loaded you'll not be able to redirect before :) — itsme, Jan 12 '15 at 11:06
So if you want to redirect before template you need to run $http calls for example in the routeProvider resolve function — itsme, Jan 12 '15 at 11:08
I think its not possible to run all ajax request in resolve function and its not a true way , I have a lot of ajax request in my controllers i think its a bad solution to do that — m hadadi, Jan 12 '15 at 11:11

Pankaj Parkar · Accepted Answer · 2015-01-13T08:18:09.723

3

I'm assuming that you are using angular ui-router.

1st thing you need to add one state in your $stateProvider config to understand 'error' state by ui-router.

Route config Code

//added state to understand error
$stateProvider.state("error": {
   url: "/error",
   templateUrl: '/views/error.html',
   controller: 'errorCtrl' //optional if you want any specific functionality
});

And You did window.location and set the url, window.location causing page to refresh. Instead of using window.location use window.location.hash

Interception function change

var interceptor = ['$rootScope', '$q', '$location', function (scope, $q, $location) {
function success(response) {
    return response;
}

function error(response) {
    var status = response.status;
    if (status == 500) {
      //window.location= "http://www.domain.lan/#!/error";
      //window.location.hash= "/error"; //it will rewrite the url without refreshing page
      $location.path('error');
      return;
    }
     if (status == 403) {

        // window.location = "dashboard";
        return;
    }
    // otherwise
    return $q.reject(responseInterceptors);

}

return function (promise) {
    return promise.then(success, error);
}

}];
$httpProvider.responseInterceptors.push(interceptor);

Other way you can try the same $state.go('error'); don't forget to add $state dependancy.

Hope this will be helpful to you. Let me know if there is still any confusion.

edited Jan 13 '15 at 08:18

answered Jan 12 '15 at 18:09

Pankaj Parkar

134,766
23
234
299

I use hashprifix in config $locationProvider.hashPrefix('!'); , and window.location.hash make error, how can i solve this problem? – m hadadi Jan 13 '15 at 05:46
I use $state.go and $location but both of them have problem that I said before in my post , at first template load and ajax request send but ajax return 404 and a div remain empty and after few second page change to error state i want to remove this few second and when user go to dashboard page(and there is some error here for example) go to error page without any interrupt – m hadadi Jan 13 '15 at 11:29
use $state.transitionTo('error') have you tried this? – Pankaj Parkar Jan 13 '15 at 11:40
all of them have true effect and change state but i can see the page that release that error for few second about 1 second for example and after that state change to error state , how can i remove this 1 second? is it possible? – m hadadi Jan 13 '15 at 11:50
@mhadadi No we can't do this, the only way you can achieve this by showing loading icon until all requests are processed – Pankaj Parkar Jan 13 '15 at 13:17
@mhadadi http://stackoverflow.com/questions/15033195/showing-spinner-gif-during-http-request-in-angular this will helps you to implement spinner. – Pankaj Parkar Jan 14 '15 at 11:37

angularjs error handling in ajax request

1 Answers1

Linked