Interceptors in Angular.js

Today we will focus how to use interceptor in angular.js to create a control mechanism for http requests and responses.

Lets start coding, as a first step i’ve created interceptor object with request , response and responseError functions you can find code below.

var interceptor = function($q){
    return {
   	request :  function(config){
   		console.log(config);
   		return config;
   	},
   	response : function(result){
   		console.log("response received");
   		result.data.forEach(function(repo){
   			console.log(repo.name);
   		})
   		return result;
   	},
   	responseError : function(rejection){
   		console.log('Reason',rejection.status);
   		return $q.reject(rejection);
   	}
   }
};

In interceptor object we defined what we want to to in request, response and responseError situations, now we will create a basic angular application like below.

angular.module('githubApp',[])

.config(function ($httpProvider){

})

And sample controller with http request

.controller("MainController",function($scope,$http){
	$http({method: 'GET', url: 'https://api.github.com/users/hamdiceylan/repos'}).success(function(data, status, headers, config) {
		$scope.repos = data;
	})
});

We will push interceptor object to httpProvider.interceptors like below code in angular config.

.config(function ($httpProvider){
       $httpProvider.interceptors.push(interceptor);
})

Now we are able to control every request and response in angular app.

Lets create a index.html file to bind data to html.

index.html  file code :

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
   <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="githubApp">
   <div ng-controller="MainController">
   	<table>
   		<tr>
   		  <td>Repository Name<td>
                  <td>Repository Desc<td>
   		</tr>
   		<tr  ng-repeat="repo in repos">
   		   <td>{{repo.name}}<td>
                   <td>{{repo.description}}<td>
   	       </tr>
   	</table>
	</div>
</body>
</html>

app.js final code :

angular.module('githubApp',[])

.config(function ($httpProvider){
	var interceptor = function($q){
   return {
   	request :  function(config){
   		console.log(config);
   		return config;
   	},
   	response : function(result){
   		console.log("starts");
   		result.data.forEach(function(repo){
   			console.log(repo.name);
   		})
   		return result;
   	},
   	responseError : function(rejection){
   		console.log('Reason',rejection.status);
   		return $q.reject(rejection);
   	}
   }
};
       $httpProvider.interceptors.push(interceptor);
})

.controller("MainController",function($scope,$http){
	$scope.title = "Test App";
	$http({method: 'GET', url: 'https://api.github.com/users/hamdiceylan/repos'}).success(function(data, status, headers, config) {
		$scope.repos = data;
		console.log(data.length);
	})
});

Open index.html in browser and check console to see messages.In console first object will have request information and other items are coming from http response. You can check below screen.

interceptorScreen

You can find source code here : https://github.com/hamdiceylan/AngularInterceptorSample

I hope you enjoy, see you on next tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *