$httpAngularJS 的$http服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下，我们希望可以俘获所有的请求，并且在将其发送到服务端之前进行操作。还有一些情况是，我们希望俘获响应，并且在完 成完成调用之前处理它。一个很好例子就是处理全局 http 异常。拦截器(Interceptors)应运而生。本文将介绍 AngularJS 的拦截器，并且给几个有用的例子。

什么是拦截器？

$httpProvider中有一个interceptors数组，而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。下面的例子告诉你怎么创建一个拦截器:

<!-- lang: js --> module.factory('myInterceptor',['$log',function($log) { $log.debug('$log is here to show you that this is a regular factory with injection'); var myInterceptor = { .... .... .... };  return myInterceptor; }]); 

然后通过它的名字添加到$httpProvider.interceptors数组:

<!-- lang: js --> module.config(['$httpProvider',function($httpProvider) { $httpProvider.interceptors.push('myInterceptor'); }]); 

拦截器允许你:

• 通过实现request方法拦截请求:该方法会在$http发送请求道后台之前执行，因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者promise。如果返回无效的配置对象或者 promise 则会被拒绝，导致$http调用失败。

• 通过实现response方法拦截响应:该方法会在$http接收到从后台过来的响应之后执行，因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数，然后必须返回响应对象或者promise。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝，导致$http调用失败。

• 通过实现requestError方法拦截请求异常:有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置，比如说关闭进度条，激活按钮和输入框什么之类的。

• 通过实现responseError方法拦截响应异常:有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了，或者被上一个响应拦截器中断了。在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。

  异步操作

有时候需要在拦截器中做一些异步操作。幸运的是， AngularJS 允许我们返回一个promise延后处理。它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应。

<!-- lang: js -->
module.factory('myInterceptor',['$q','someAsyncService',function($q,someAsyncService) { var requestInterceptor = { request: function(config) { var deferred = $q.defer(); someAsyncService.doAsyncOperation().then(function() { // Asynchronous operation succeeded,modify config accordingly ... deferred.resolve(config); },function() { // Asynchronous operation failed,modify config accordingly ... deferred.resolve(config); }); return deferred.promise; } }; return requestInterceptor; }]); 

这个例子中，请求拦截器使用了一个异步操作，根据结果来更新配置。然后它用更新后的配置继续执行操作。如果deferred被拒绝，http 请求则会失败。

响应拦截器的例子一样:

function(response) { var deferred = $q.defer(); someAsyncService.doAsyncOperation().then(function() { // Asynchronous operation succeeded,modify response accordingly ... deferred.resolve(response); },modify response accordingly ... deferred.resolve(response); }); return deferred.promise; } }; return responseInterceptor; }]); 

只有当deferred被解析，请求才算成功，如果deferred被拒绝，请求将会失败。

例子

本节中我将提供一些 AngularJS 拦截器的例子，以便让你更好的理解它们是如何使用的，并且可以展示一下它们能怎样帮助你。不过请记住，我这里提供的解决案不一定是最好或者最准确的解决案。

Session 注入(请求拦截器)

这里有两种方式来实现服务端的认证。第一种是传统的Cookie-Based验证。通过服务端的 cookies 来对每个请求的用户进行认证。另一种方式是Token-Based验证。当用户登录时，他会从后台拿到一个sessionToken。sessionToken在服务端标识了每个用户，并且会包含在发送到服务端的每个请求中。

下面的sessionInjector为每个被俘获的请求添加了x-session-token头 (如果当前用户已登录):

<!-- lang: js -->
module.factory('sessionInjector',['SessionService',function(SessionService) { var sessionInjector = { request: function(config) { if (!SessionService.isAnonymus) { config.headers['x-session-token'] = SessionService.token; } return config; } }; return sessionInjector; }]); module.config(['$httpProvider',255)">function($httpProvider) { $httpProvider.interceptors.push('sessionInjector'); }]); 

然后创建一个请求:

<!-- lang: js --> $http.get('https://api.github.com/users/naorye/repos'); 

被sessionInjector拦截之前的配置对象是这样的:

<!-- lang: js --> { "transformRequest": [ null ],"transformResponse": [ null ],21)">"method": "GET","url": "https://api.github.com/users/naorye/repos","headers": { "Accept": "application/json,text/plain,*/*" } }

被sessionInjector拦截之后的配置对象是这样的:

,"x-session-token": 415954427904 } }

时间戳(请求和响应拦截器)

让我们用拦截器来测一下从后台返回响应需要多少时间。可以通过给每个请求和响应加上时间戳。

'timestampMarker',[function() { var timestampMarker = { request: function(config) { config.requestTimestamp = new Date().getTime(); return config; },response: function(response) { response.config.responseTimestamp = new Date().getTime(); return response; } }; return timestampMarker; }]); module.config(['timestampMarker'); }]); 

然后我们可以这样:

<!-- lang: js --> $http.get('https://api.github.com/users/naorye/repos').then(function(response) { var time = response.config.responseTimestamp - response.config.requestTimestamp; console.log('The request took ' + (time / 1000) + ' seconds.'); });

完整代码:example for the Timestamp Marker

请求恢复 (请求异常拦截)

为了演示请求异常拦截，我们需要模拟前一个拦截器拒绝了请求这种情况。我们的请求异常拦截器会拿到被拒绝的原因以及恢复请求。

让我们来创建两个拦截器:requestRejector和requestRecoverer。

'requestRejector',255)">function($q) { var requestRejector = { request: function(config) { return $q.reject('requestRejector'); } }; return requestRejector; }]); module.factory('requestRecoverer',255)">var requestRecoverer = { requestError: function(rejectReason) { if (rejectReason === 'requestRejector') { // Recover the request return { transformRequest: [],transformResponse: [],method: 'GET',url: 'https://api.github.com/users/naorye/repos',headers: { Accept: 'application/json,*/*' } }; } else { return $q.reject(rejectReason); } } }; return requestRecoverer; }]); module.config([function($httpProvider) { $httpProvider.interceptors.push('requestRejector'); // Removing 'requestRecoverer' will result to failed request $httpProvider.interceptors.push('requestRecoverer'); }]); 

然后，如果你像下面这样请求，我们会在 log 中看到success，虽然requestRejector拒绝了请求。

<!-- lang: js --> $http.get('https://api.github.com/users/naorye/repos').then(function() { console.log('success'); },255)">function(rejectReason) { console.log('failure'); }); 

完整代码:example for the Request Recover

Session 恢复 (响应异常拦截器)

有时候，我们的单页面应用中，会发生丢失 session 情况。这种情况可能由于 session 过期了或者服务器异常。我们来创建一个拦截器，用于恢复 session 然后自动重新发送原始请求(假设 session 过期的情况)。

为了演示目的，我们来假设发生了 session 过期返回 http 状态码 419。

'sessionRecoverer','$injector',255)">function($q,$injector) { var sessionRecoverer = { responseError: function(response) { // Session has expired if (response.status == 419){ var SessionService = $injector.get('SessionService'); var $http = $injector.get('$http'); var deferred = $q.defer(); // Create a new session (recover the session) // We use login method that logs the user in using the current credentials and // returns a promise SessionService.login().then(deferred.resolve,deferred.reject); // When the session recovered,make the same backend call again and chain the request return deferred.promise.then(function() { return $http(response.config); }); } return $q.reject(response); } }; return sessionRecoverer; }]); module.config(['sessionRecoverer'); }]); 

以这种方式，如果后台调用失败引起 session 过期，sessionRecoverer会创建一个新的 session 然后重新调用后台。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!