Monday, 29 January 2018

HTTP Interceptors In AngularJS

In a request and response communication of a HTTP call if we want to inject some custom logic the HTTP Interceptor comes into picture. HTTP Interceptors executes some custom logic before or after the HTTP call.



For example, appending the authentication token to every HTTP request and that token is generated from the client who needs to be validated at the server for security purpose.

These interceptors act as a hook up for the HTTP calls.

HTTP Interceptors are used for adding custom logic for authentication, authorization, session/state management, logging, modifying Response, URL rewriting, Error handling, Caching, adding custom header, timestamp in the request /response, encrypt and decrypt the request and response information or manipulate the request and response data over the request cycles.

HTTP Interceptors are similar to custom HTTP Module of ASP.NET.

There are four kinds of interceptors in AngularJS - Request, requestError, response, responseError

Setup
function testInterceptor() {
  return {
    request: function(config) {
      return config;
    },

    requestError: function(config) {
      return config;
    },

    response: function(res) {
      return res;
    },

    responseError: function(res) {
      return res;
    }
  }
}

angular.module('app', [])
.factory('testInterceptor', testInterceptor)
.config(function($httpProvider) {
  $httpProvider.interceptors.push('testInterceptor');
})
.run(function($http) {
  $http.get('http://test-routes.herokuapp.com/test/hello')
    .then(function(res) {
      console.log(res.data.message)
    })
})


<html>
    <head>
        <title>$http interceptors</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-app="app">
    </body>
</html>

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

request: called before a request is sent, capable of mutating the request object
requestError: 
response: called with an $http request succeeds, is passed the results object,
responseError: called if an $http method fails

This object is then registered as an interceptor with the $httpProvider in a config() block. It's perfectly fine to include all or only a subset of the properties that are needed.

The way to think about interceptor functions is as promise callback functions that are called for all HTTP requests.


2 comments:

  1. Hi There,

    Gratitude for putting up this prolific article! You truly make everything a cake walk. Genuinely good stuff, saving time and energy.

    How to clear the cache memory or disable the cache option in browser programmatically using angularjs and javascript without using session or timestamp.

    Super likes !!! for this amazing post. I thinks everyone should bookmark this.

    Many Thanks,
    Irene Hynes

    ReplyDelete

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (9) Web Service (1) XMl (1)