http interception, that is, the $http service allows us to interact with the server. Sometimes we want to do something before making a request and after receiving the response.
$httpProvider contains an array of interceptors.
We create an interceptor like this.
app.factory('myInterceptor', ['$log', function($log){ $log.debug(''); var myInterceptor = {}; return myInterceptor; }])
Then register the interceptor.
app.config(['$httpProvider', function($httpProvider){ $httpProvider.interceptors.push('myInterceptor'); }])
The following are some examples of $http interception.
■ Asynchronous operations in interceptors
app.factory('myInterceotpr','someAsyncServcie', function($q, someAsyncServcie){ var requestInterceptor = { request: function(config){ var deferred = %q.defer(); someAsyncService.doAsyncOperation().then(function(){ ... deferred.resolve(config); }, function(){ ... deferred.resolve(config); }) return deferred.promise; } }; return requestInterceptor; })
The above is a request interception, an asynchronous operation is performed, and the config is updated according to the result of the asynchronous operation.
Of course there is also response interception.
app.factory('myInterceptor',['$q', 'someAsyncService', function($q, someAsyncSercice){ var responseInterceptor = { response: function(response){ var deferred = $q.defer(); someAsyncService.doAsyncOperation().then(function(response){ ... deferred.resolve(response); }, function(response){ ... deferred.resolve(response); }) return deferred.promise; } }; return responseInterceptor; }])
■ Session interception, request interception
The server has two types of verification, one is based on cookies and the other is based on tokens. For token-based authentication, when the user logs in, a token from the server is obtained, and this token is sent to the server with each request.
Create an injector related to the session:
app.factory('sessionInjector',['SessionService', function(SessionService){ var sessionInjector = { request: function(config){ if(!SessionService.isAnonymous){ config.headers['x-session-token'] = SessionService.token; } return config; } }; return sessionInjector; }])
It can be seen that the token returned from the server is placed in config.headers.
Register injector:
app.config(['$httpProvider', function($httpProvider){ $httpProvider.interceptors.push('sessionInjector'); }])
Make a request:
$http.get('');
Before interception it was roughly:
{ "transformRequest":[null], "transformResponse":[null], "method":"GET", "url":"", "headers":{ "Accept": "application/json, text/plain,*/*" } }
After interception, add two more x-session-token fields in the headers:
{ "transformRequest":[null], "transformResponse":[null], "method":"GET", "url":"", "headers":{ "Accept": "application/json, text/plain,*/*", "x-session-token":...... } }
■ Timestamp, request and response interception
app.factory('timestampMarker',[function(){ var timestampMarker = { request:function(config){ config.requestTimestamp = new Date().getTime(); return config; }, response: function(response){ response.config.responseTimestamp = new Date().getTime(); return config; } }; return timestampMarker; }])
Above, intercept during request and response, and assign the current time to config.requestTimestamp and config.responseTimestamp.
Register interceptor:
app.config(['$httpProvider', function($httpProvider){ $httpProvider.interceptors.push('timestampMarker'); }])
Then you can calculate the time it takes for the request to respond when you use it.
$http.get('').then(function(response){ var time = response.config.responseTime - response.config.requestTimestamp; console.log('请求耗去的时间为 ' + time); })
■ Request error recovery, request interception
Simulate an error situation of request interception:
app.factory('requestRejector',['$q', function($q){ var requestRejector = { request: function(config){ return $q.reject('requestRejector'); } }; return requestRejector; }])
Interception request error:
app.factory('requestRecoverer',['$q', function($q){ var requestRecoverer = { requestError: function(rejectReason){ if(rejectReason === 'requestRejector'){ //恢复请求 return { transformRequest:[], transformResponse:[], method:'GET', url:'', headers:{ Accept:'application/json, text/plain, */*' } }; } else { return $q.reject(rejectReason); } } }; return requestRecoverer; }])
Register interceptor:
app.config(['$httpProvider', function($httpProvider){ $httpProvider.interceptors.push('requestRejector'); $httpProvider.interceptors.push('requestRecoverer'); }])
■ Session error recovery, response interception
app.factory('sessionRecoverer',['$q','$injector',function($q, $injector){ var sessionRecoverer = { responseError: function(response){ //如果Session过期 if(response.status == 419){ var SessionService = $injector.get('SessionService'); var $http = $injector.get('$http'); var deferred = $q.defer(); //创建一个新的session SessionService.login().then(deferred.resolve, deferred.reject); return deferred.promise.then(function(){ reutrn $http(response.config); }) } return $q.reject(response); } }; return sessionRecoverer; }])
The above is the entire content of this article, I hope it will be helpful to everyone’s study.