Interceptor in Angular
$http service
This service is an Angular method for making HTTP request for external resources. All HTTP requests has an asynchronous nature. Because of that, all operations return promises. Generally, this service could be used by defining parameters directly, like below
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
or by using shortcut methods
$http.get('/someUrl', config).then(successCallback, errorCallback);
Interceptor in Angular
The same as in previous post about interceptor in Angular you can also setup global mechanism to intercept each HTTP request. It can be useful for error handling, logging or authentication. You can use 4 types of additional configurations:
- before sending request (
requestfunction) - after response retrieve (
responsefunction) - on error during sending request (
requestErrorfunction) - on error during retrieving response (
responseErrorfunction)
Implementation
To setup interceptor, you should only define service factory with declaring at least one of function mentioned in list above. Below you can see an example from the Angular documentation
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q)
{
return {
'request': function(config) {
// do something on success
return config || $q.when(config);
},
'requestError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
},
'response': function(response) {
// do something on success
return response || $q.when(response);
},
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
Into this handlers you can also use asynchronous operations, because you can return promises from them.
As can be seen, it is very simple, but powerful functionality to add common behaviours to your data operations.
References:
https://docs.angularjs.org/api/ng/service/$http
http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/
http://www.bennadel.com/blog/2777-monitoring-http-activity-with-http-interceptors-in-angularjs.htm
http://thecodebarbarian.com/2015/01/24/angularjs-interceptors