浅析AngularJs HTTP响应拦截器
为何要用拦截器？
任何时候，如果我们想要为请求添加全局功能，例如身份认证、错误处理等，在请求发送给服务器之前或服务器返回时对其进行拦截，是比较好的实现手段。
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）。
在服务中添加一种或多种拦截器：
angular.module("myApp", [])
.factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) {
var httpInterceptor = {
'responseError' : function(response) {
......
return $q.reject(response);
},
'response' : function(response) {
......
return response;
},
'request' : function(config) {
......
return config;
},
'requestError' : function(config){
......
return $q.reject(config);
}
}
return httpInterceptor;
}
然后使用$httpProvider在.config()函数中注册拦截器
angular.module("myApp", [])
.config([ '$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
} ]);
实际的例子：（对401、404的拦截）
routerApp.config([ '$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
} ]);
routerApp.factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) {
var httpInterceptor = {
'responseError' : function(response) {
if (response.status == 401) {
var rootScope = $injector.get('$rootScope');
var state = $injector.get('$rootScope').$state.current.name;
rootScope.stateBeforLogin = state;
rootScope.$state.go("login");
return $q.reject(response);
} else if (response.status === 404) {
alert("404!");
return $q.reject(response);
}
},
'response' : function(response) {
return response;
}
}
return httpInterceptor;
}
]);
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', function($httpProvider) {
$httpProvider.interceptors.push('sessionInjector');
}]);
然后创建一个请求:
<!-- lang: js -->
$http.get('https://api.github.com/users/naorye/repos');
被 sessionInjector 拦截之前的配置对象是这样的:
<!-- lang: js -->
{
"transformRequest": [
null
],
"transformResponse": [
null
],
"method": "GET",
"url": "https://api.github.com/users/naorye/repos",
"headers": {
"Accept": "application/json, text/plain, */*"
}
}
被 sessionInjector 拦截之后的配置对象是这样的:
<!-- lang: js -->
{
"transformRequest": [
null
],
"transformResponse": [
null
],
"method": "GET",
"url": "https://api.github.com/users/naorye/repos",
"headers": {
"Accept": "application/json, text/plain, */*",
"x-session-token": 415954427904
}
}
以上内容给大家介绍了AngularJs HTTP响应拦截器的相关知识，希望本文分享能够给大家带来帮助。
相关文章
这篇文章主要介绍了AngularJS自定义服务与fliter的混合使用的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
本篇文章主要介绍了详解AngularJS 模块化，模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。有兴趣的可以了解一下2017-06-06
AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。下面我们来看看如何使用angularjs创建简单表格2016-01-01
这篇文章主要介绍了Angular使用$http.jsonp发送跨站请求的方法,结合实例形式分析了$http.jsonp发送跨站请求遇到的问题与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下2017-03-03
AngularJS之ionic 框架下实现 Localstorage本地存储
这篇文章主要介绍了AngularJS之ionic 框架下实现 Localstorage本地存储，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
今天小编就为大家分享一篇Angular异步变同步处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了Angular应用懒加载模块配置管理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
本篇文章主要介绍了angular 基于ng-messages的表单验证实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
Angular 2父子组件数据传递之@Input和@Output详解 (上)
这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。2017-07-07
这篇文章主要介绍了AngularJS中的filter过滤器用法,包括其在模版中和在controller以及service的常见应用场合,需要的朋友可以参考下2016-01-01
最新评论