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
– m hadadi, Commented Jan 10, 2015 at 13:15
Why you dont handle such error in $routeProvider / $stateProvider itself. — Pankaj Parkar
– Pankaj Parkar, Commented Jan 10, 2015 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 :) — Filippo oretti
– Filippo oretti, Commented Jan 12, 2015 at 11:06
So if you want to redirect before template you need to run $http calls for example in the routeProvider resolve function — Filippo oretti
– Filippo oretti, Commented Jan 12, 2015 at 11:08

Pankaj Parkar · Accepted Answer · 2015-01-13 08:18:09Z

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, 2015 at 8:18

answered Jan 12, 2015 at 18:09

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

6 Comments

m hadadi Over a year ago

I use hashprifix in config $locationProvider.hashPrefix('!'); , and window.location.hash make error, how can i solve this problem?

m hadadi Over a year ago

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

Pankaj Parkar Over a year ago

use $state.transitionTo('error') have you tried this?

m hadadi Over a year ago

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?

Pankaj Parkar Over a year ago

@mhadadi No we can't do this, the only way you can achieve this by showing loading icon until all requests are processed

|

Collectives™ on Stack Overflow

angularjs error handling in ajax request

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related