CODEWITHSUNDEEP
javascriptajaxangularjsinterceptor
WelcomeTo
WelcomeTo

Reputation: 20581

AngularJS. Adding global AJAX error handler if it is not already defined

How I can set global AJAX handler which will be called only if I not already defined error handler for specific AJAX call?

Some of my ajax call really need to do some logic if error was occurred (for example re-enable button), but for some AJAX I only need to show error message if error was occurred.

For example this code is not define any error handler for AJAX call, so I want to apply to this call global error handler where I will just show error message: 

user.$delete().then(function () {
    // on success
});

But this AJAX call already define error handler, and I don't want to apply global handler to it: 

    $scope.deleteButtonEnabled = false;
    user.$delete().then(function () {
        // on success
    }, function(err) {   
        // Do some stuff and then show error message     
        $scope.deleteButtonEnabled = true;        
        alert('Error' + JSON.stringify(err))
    });

Upvotes: 2

Views: 1824

Answers (1)

PSL
PSL

Reputation: 123739

You can make use of interceptors and some config in the http calls.

Define an interceptor:-

angular.service('HttpInterceptor', function($q){
  var service = {
     response:function(response) { //Only if you need
        //If you have to handle response data based errors you could do this here
         return $q.when(response);
      },
     responseError: function(response){
        if(!response.config.suppressGlobal){ //Handle error only if the global error handling is not suppressed
            //Handle Error based
            alert('Error' + response.status);
        }

        return $q.reject(response);
    }
  };
}).config(['$httpProvider', function($httpProvider){
    $httpProvider.interceptors.push('HttpInterceptor'); //Push the interceptor here
}]);

In your service example, when you make the http or resource call, let the method take an optional boolean argument to suppress the global error handler, pass it along with the config dictionary argument of the http call:-

   app.service('userService', function(){
        this.getData = function(suppressGlobal){ //Take a flag to suppress globals
             return  http.get('...', {suppressGlobal:suppressGlobal}).. //Pass the flag in the config
        };
        this.delete = function(suppressGlobal){ //Take a flag to suppress globals
          return http.delete('...', {suppressGlobal:suppressGlobal}).. //Pass the flag in the config
        }
        this.add = function(suppressGlobal){//Take a flag to suppress globals
            return http.post('..', data, {suppressGlobal:suppressGlobal}).. //Pass the flag in the config
        }
   });

and when you make a call:-

   // Code that needs global error handling
    user.delete().then(function () { //just call your service method as is
       // on success
    });

In some other place:-

// Code that needs to suppress global error handling
user.delete(true).then(function () { //Pass true as argument to the delete which will supress global error handling.
    // on success
}, function(err) {   
    // Do some stuff and then show error message     
    $scope.deleteButtonEnabled = true;        
    alert('Error' + JSON.stringify(err))
});

Upvotes: 5

Related Questions