AngularJS HTTP Interceptor Generic httpInterceptor step by step
Example
Create an HTML file with the following content:
<!DOCTYPE html>
<html>
<head>
<title>Angular Interceptor Sample</title>
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fcode.angularjs.org%2F1.5.8%2Fangular.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bapp.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3BappController.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3BgenericInterceptor.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3B%2Fhead%26gt%3B%26lt%3Bbody%2520ng-app%3D%26quot%3BinterceptorApp%26quot%3B%26gt%3B%2520%2520%2520%2520%26lt%3Bdiv%2520ng-controller%3D%26quot%3BappController%2520as%2520vm%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bbutton%2520ng-click%3D%26quot%3Bvm.sendRequest()%26quot%3B%26gt%3BSend%2520a%2520request%26lt%3B%2Fbutton%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fdiv%26gt%3B%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode">Add a JavaScript file called 'app.js':
var interceptorApp = angular.module('interceptorApp', []);
interceptorApp.config(function($httpProvider) {
$httpProvider.interceptors.push('genericInterceptor');
});
Add another one called 'appController.js':
(function() {
'use strict';
function appController($http) {
var vm = this;
vm.sendRequest = function(){
$http.get('http://google.com').then(function(response){
console.log(response);
});
};
}
angular.module('interceptorApp').controller('appController',['$http', appController]);
})();
And finally the file containing the interceptor itself 'genericInterceptor.js':
(function() {
"use strict";
function genericInterceptor($q) {
this.responseError = function (response) {
return $q.reject(response);
};
this.requestError = function(request){
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
};
this.response = function(response){
return response;
};
this.request = function(config){
return config;
}
}
angular.module('interceptorApp').service('genericInterceptor', genericInterceptor);
})();
The 'genericInterceptor' cover the possible functions which we can override adding extra behavior to our application.
