Introduction
AngularJS interceptors offer a convenient way to modify request made by the
$http service both before they are sent and after they return.
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 objectrequestError:response: called with an$httprequest succeeds, is passed the results object,responseError: called if an$httpmethod 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.
An Example: Automatically Adding CSRF Tokens
To demonstrate a useful task for interceptors, let's use the request property
to automatically add a csrf token to every request made to the domain
test-routes.herokuapp.com. These tokens are commonly used by frameworks such as Ruby on Rails and Django:
request: function(config) {
if(config.url.indexOf('http://test-routes.herokuapp.com') > -1) {
config.headers['x-csrf-token'] = 'lalalalala';
}
return config;
}
Here we're testing the url of the request to see if it matches the URL we want. Then,
we're attaching an extra header that contains (what would be) the CSRF token.
Another really useful feature of interceptors is dealing with authentication of requests. You can see an example of this here: Simple AngularJS Authentication with JWT
There's more to learn!