angularJs HTTP响应拦截器

妖狐艹你老母 2022-09-26 01:51 84阅读 0赞

为何要用拦截器？

任何时候，如果我们想要为请求添加全局功能，例如身份认证、错误处理等，在请求发送给服务器之前或服务器返回时对其进行拦截，是比较好的实现手段。

angularJs通过拦截器提供了一个从全局层面进行处理的途径.

拦截器允许你:

*  通过实现 request 方法拦截请求: 该方法会在 $http 发送请求道后台之前执行，因此你可以修改配置或做其他的操作。该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者 promise 。如果返回无效的配置对象或者 promise 则会被拒绝，导致 $http 调用失败。
 *  通过实现 response 方法拦截响应: 该方法会在 $http 接收到从后台过来的响应之后执行，因此你可以修改响应或做其他操作。该方法接收响应对象(response object)作为参数，然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。如果返回无效的响应对象或者 promise 会被拒绝，导致$http 调用失败。
 *  通过实现 requestError 方法拦截请求异常: 有时候一个请求发送失败或者被拦截器拒绝了。请求异常拦截器会俘获那些被上一个请求拦截器中断的请求。它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置，比如说关闭进度条，激活按钮和输入框什么之类的。
 *  通过实现 responseError 方法拦截响应异常: 有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了，或者被上一个响应拦截器中断了。在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。

拦截器的核心是服务工厂，通过向$httpprovider.interceptors数组中添加服务工厂。在$httpProvider中进行注册。  
 angularJs提供四种拦截器，其中两种成功拦截器（request、response），两种失败拦截器（requestError、responseError）。

在服务中添加一种或多种拦截器：

**\[plain\]**  [view plain][]   [copy][view plain]

1.  angular.module("myApp", \[\])  
2.      .factory('httpInterceptor', \[ '$q', '$injector',function($q, $injector) \{  
3.          var httpInterceptor = \{  
4.              'responseError' : function(response) \{  
5.                  ......  
6.                  return $q.reject(response);  
7.              \},  
8.              'response' : function(response) \{  
9.                  ......  
10.                 return response;  
11.             \},  
12.             'request' : function(config) \{  
13.                 ......  
14.                 return config;  
15.             \},  
16.             'requestError' : function(config)\{  
17.                 ......  
18.                 return $q.reject(config);  
19.             \}  
20.         \}  
21.     return httpInterceptor;  
22. \}

然后使用$httpProvider在.config()函数中注册拦截器

**\[plain\]**  [view plain][]   [copy][view plain]

1.  angular.module("myApp", \[\])  
2.  .config(\[ '$httpProvider', function($httpProvider) \{  
3.      $httpProvider.interceptors.push('httpInterceptor');  
4.  \} \]);

实际的例子：（对401、404的拦截）

**\[plain\]**  [view plain][]   [copy][view plain]

1.  routerApp.config(\[ '$httpProvider', function($httpProvider) \{  
2.          $httpProvider.interceptors.push('httpInterceptor');  
3.      \} \]);  
4.    
5.      routerApp.factory('httpInterceptor', \[ '$q', '$injector',function($q, $injector) \{  
6.          var httpInterceptor = \{  
7.              'responseError' : function(response) \{  
8.                  if (response.status == 401) \{  
9.                      var rootScope = $injector.get('$rootScope');  
10.                     var state = $injector.get('$rootScope').$state.current.name;  
11.                     rootScope.stateBeforLogin = state;  
12.                     rootScope.$state.go("login");  
13.                     return $q.reject(response);  
14.                 \} else if (response.status === 404) \{  
15.                     alert("404!");  
16.                     return $q.reject(response);  
17.                 \}  
18.             \},  
19.             'response' : function(response) \{  
20.                 return response;  
21.             \}  
22.         \}  
23.         return httpInterceptor;  
24.     \}   
25. \]);

[view plain]: http://blog.csdn.net/ddd306/article/details/43344843#