Post
Ask Question

Transformation Functions And Interceptors In AngularJS

Transformation functions

Transforamtion functions are used to format the data before sending the request to the server and after recieveing the response from the server. Let's suppose that you are using two different Servces in your Application and the data is coming in the format given below.

Although the data from both the Services is similar and represents the same piece of information but only the property names are different. To sort out this data in your Application is difficult and may be a mess in your Application code. Transformation functions provide a solution to this problem by reading the data from each Service and transforming it into one data format. 
After transformation, the propertis are standarized and you can easily manipulate the data. Angular provides default transformation for the request and response and they can be accessed through $http.default object.

Transform Response

Syntax

  1. $http({    
  2.       url: '',    
  3.       method: 'GET',    
  4.       transformResponse: function(data, headersGetter,status) {    
  5.   
  6.          //the first paramter is the data which is coming back from server  
  7.          //headersGetter paramater povides access to header object  
  8.          //third parameter is status code which is available on above 1.3.7 AngularJS version  
  9.   
  10.         return transformedObject;    
  11.       }    
  12.     
  13.     }).then(function(response) {    

  15.          //do some stuff here  

  17.     }).catch(function(){  

  19.          //do some stuff here  
  20. });    
Plunker - Transformation Response Function Example

Transform Request

Syntax 
  1. $http.post('url', data, {    
  2.      transformRequest: function(data, headersGetter) {    

  4.         //data and headersGetter do same functionality as in Response transformation  
  5.        //do some stuff  

  7.        return JSON.stringify(data);    
  8.      }    
  9.    });    
Plunker - Transformation Request Function Example

Interceptors

Interceptors are used to modify $http configuration objects before the request is sent to the Server and the response object before they are handed over to the application. They are implemented as Service factory and can be used by adding them into $httpProvider.interceptors array.

Syntax 
  1. var myApp = angular.module('myApp', [])      
  2.   //implementation    
  3. .factory('myInterceptor', ['$q', '$log', function($q, $log) {      
  4.       
  5.   return {      
  6.   
  7.     request: function(config) {      
  8.    //modify config object before sending request to the server  
  9.       return config;      
  10.     },      
  11.     responseError: function(response) {      
  12.         //do some stuff here    
  13.         return response;      
  14.       }      
  15.               
  16.   }      
  17.       
  18. }]);      
  19.     
  20.   //adding into $httpProvider.interceptors array    
  21. myApp.config(['$httpProvider', function($httpProvider) {      
  22.   
  23.   $httpProvider.interceptors.push('myInterceptor');      
  24.   
  25. }]);     
Plunker - Interceptors Example

Summary

In this blog, we saw how can we transform the request before sending it to the Server and the response after receiving from the Server, using AngularJS Transformation functions and how we can modify $http configuration object through Interceptors.
Next Recommended Reading Creating Dynamic Menu From Database By Using MVC AngularJS