Overview About Angular Interceptor?

Question

Interceptors define custom transformations for HTTP requests and responses at the application level. In other words, interceptors define general rules for how your application processes HTTP requests and responses.

An interceptor is simply a factory() service that returns an object with 4 properties that map to functions:

• request: interceptors get called with a http config object. The function is free to modify the config object or create a new one. The function needs to return the config object directly, or a promise containing the config or a new config object.
• requestError: interceptor gets called when a previous interceptor threw an error or resolved with a rejection.
• response: interceptors get called with http response object. The function is free to modify the response object or create a new one. The function needs to return the response object directly, or as a promise containing the response or a new response object.
• responseError: interceptor gets called when a previous interceptor threw an error or resolved with a rejection.

We activate an interceptor service by pushing that service into the $httpProvider.interceptors array in the config block of our application.
A session token can be added for all outgoing HTTP requests by adding it to the config.headers object in a request interceptor.
We can intercept HTTP response errors and handle specific errors by checking the response.status code.
$rootScope has limited utility when it comes to direct interaction, but it works well as an event bus as seen in the case of keeping our MainCtrl synchronized.

 

Example Code:

m.config(function($httpProvider) {
  $httpProvider.interceptors.push(function($q, $injector, userService) {
    return {
      request: function(request) {
        request.headers.authorization =
          userService.getAuthorization();
        return request;
      },
      // This is the responseError interceptor
      responseError: function(rejection) {
        if (rejection.status === 401) {
          // Return a new promise
          return userService.authenticate().then(function() {
            return $injector.get('$http')(rejection.config);
          });
        }

        /* If not a 401, do nothing with this error.
         * This is necessary to make a `responseError`
         * interceptor a no-op. */
        return $q.reject(rejection);
      }
    };
  });
});

 

Video for HTTP Interceptors