详解Angular.js中$http拦截器的介绍及使用
前言
$http service在Angular中用于简化与后台的交互过程,其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互。在与后台的交互过程中,可能会对每条请求发送到Server之前进行预处理(如加入token),或者是在Server返回数据到达客户端还未被处理之前进行预处理(如将非JSON格式数据进行转换);当然还有可能对在请求和响应过程过发生的问题进行捕获处理。所有这些需求在开发中都非常常见,所以Angular为我们提供了$http拦截器,用来实现上述需求。
什么是拦截器
顾名思义,拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors
数组定义的一组拦截器,每个拦截器都是实现了某些特定方法的Factory:
实现拦截器
http拦截器一般通过定义factory的方式实现:
myApp.factory('MyInterceptor', function($q) { return { // 可选,拦截成功的请求 request: function(config) { // 进行预处理 // ... return config || $q.when(config); }, // 可选,拦截失败的请求 requestError: function(rejection) { // 对失败的请求进行处理 // ... if (canRecover(rejection)) { return responseOrNewPromise } return $q.reject(rejection); }, // 可选,拦截成功的响应 response: function(response) { // 进行预处理 // .... return response || $q.when(reponse); }, // 可选,拦截失败的响应 responseError: function(rejection) { // 对失败的响应进行处理 // ... if (canRecover(rejection)) { return responseOrNewPromise } return $q.reject(rejection); } }; });
随后,我们需要将实现的拦截器加入到$httpProvider.interceptors
数组中,此操作一般在config方法中进行:
myApp.config(function($httpProvider) { $httpProvider.interceptors.push(MyInterceptor); });
当然,我们也可以通过匿名factroy的方式实现:
$httpProvider.interceptors.push(function($q) { return { request: function(config) { // bala }, response: function(response) { // bala }, // bala }; });
可以看到,每个拦截器都可以实现4个可选的处理函数,分别对应请求(成功/失败)和响应(成功/失败)的拦截:
1、request:此函数在$http向Server发送请求之前被调用,在此函数中可以对成功的http请求进行处理,其包含一个http config对象作为参数,这里对config对象具有完全的处理权限,甚至可以重新构造,然后直接返回此对象或返回包含此对象的promise即可。如果返回有误,会造成$http请求失败。如开发中经常需要在请求头中加入token以便验证身份,我们可以作如下处理:
request: function(config) { config.headers = config.headers || {}; if ($window.sessionStorage.token) { config.headers['X-Access-Token'] = $window.sessionStorage.token; } return config || $q.when(config); }
2、requestError:此方法会在前一个拦截器抛出异常或进行了reject操作时被调用,在这里可以进行恢复请求的操作,或者进行一些对于请求时发起动作的处理(如取消loading等);
3、response:此函数在$http从Server接收到响应时被调用,在此函数中可以对成功的http响应进行处理,这里具有对响应的完全处理权限,甚至可以重新构造,然后直接返回响应或返回包含响应的promise即可。如果返回有误,会造成$http接收响应失败;
4、responseError:此方法会在前一个拦截器抛出异常或进行了reject操作时被调用,在这里可以进行恢复响应的操作,进行一些针对错误的处理。
使用用例
为演示Angular $http拦截器的使用方法,下面通过几个常用的用例来说明:
利用request拦截器模拟实现Angular的XSRF(即CSRF)防御
CSRF,即“跨站请求伪造”,不过不知道为什么Angular将其称为XSRF。当处理与后台交互时,Angular的$http会尝试从客户端cookie中读取一个token,其默认的key为XSRF-TOKEN,并构造一个名为X-XSRF-TOKEN的http头部,与http请求一起发送到后台。Server端就可以根据此token识别出请求来源于同域,当然跨域的请求$http不会加入X-XSRF-TOKEN头部。那我们可以利用request拦截器通过如下方式在同域请求头部中加入此头部以达到模拟Angular的XSRF(即CSRF)防御机制的实现效果:
/** * 正式开发中Angular会主动进行XSRF防御(只要cookie中存在key为`XSRF-TOKEN`的token), * 一般不需要手动进行,除非cookie中不存在key为`XSRF-TOKEN`的token,这里只是模拟实现 */ request: function(config) { if(config.url.indexOf('SAME_DOMAIN_API_URL') > -1) { config.headers['X-XSRF-TOKEN'] = $cookies.get('XSRF-TOKEN'); } return config; }
如果初始http请求头部类似于:
"headers": { "Accept": "application/json, text/plain, */*" }
那么经过上述的拦截器后,其http请求头部就变成了:
"headers": { "Accept": "application/json, text/plain, */*", "X-XSRF-TOKEN": X-XSRF-TOKEN-VALUE }
利用response拦截器模拟实现Angular JSON易损性(JSON vulnerability)防御
Angular在$http请求安全性方面不仅为我们设计了XSRF(CSRF)防御,而且针对请求JSON数据的Url可能通过类似于<script>标签加载的方式被恶意网站获取到我们的JSON数据的情况,设计了Angular JSON易损性(JSON vulnerability)防御,即Server端返回的JSON数据头部可以添加")]}',\n"字符串,得到包含此前缀的响应数据后,Angular会将此前缀删去,将响应还原成正式的JSON数据。此时我们就可以通过response拦截器模拟此过程:
response: function(response) { var data = examineJSONResponse(response); // 假设存在这样一个方法 if(!data) { response = validateJSONResponse(response); // 假设存在这样一个方法 } return response || $q.when(reponse); }
利用request拦截器和response拦截器计算http请求耗时
这个需求可能在开发中并不常用,这里只是作为同时使用request拦截器和response拦截器的例子,我们可以在request拦截器和response拦截器中分别计时,然后求得其差值即可:
myApp.factory('timestampMarker', [function() { return { request: function(config) { config.requestTimestamp = new Date().getTime(); return config; }, response: function(response) { response.config.responseTimestamp = new Date().getTime(); return response; } }; }]); myApp.config(['$httpProvider', function($httpProvider) { $httpProvider.interceptors.push('timestampMarker'); }]);
这样我们在每次请求后台时,就能够计算出相应请求的耗时了,如:
$http.get('https://api.github.com/users/liuwenzhuang/repos').then(function(response) { var time = response.config.responseTimestamp - response.config.requestTimestamp; console.log('The request took ' + (time / 1000) + ' seconds.'); });
总结
$http作为Angular中的核心service,其功能非常强大便捷,今天描述了其子功能http拦截器的概念和描述方式,有理解不正确的地方,请大家留言告知。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaSE重点复习
- [数据结构与算法] 树结构之二叉排序树、平衡二叉树、多路查找树
- 工作后, 你一定不能错过技术之JDK1.8的新特性
- 【Go】剑指offer:二叉树子树的判断
- css中的box-shadow属性详解
- 基于docker快速搭建多节点Hadoop集群
- CSS简笔画:纯CSS绘制一辆婴儿车
- 分布式自增数据库ID
- 【STM32F429开发板用户手册】第27章 STM32F429的定时器应用之TIM1-TIM14的PWM实现
- 数据库基础开源学习教程-android 使用 litepal 操作本地数据库
- 红黑树——动态+静态图
- 一文读懂Python实现张量运算
- javascript之闭包基础了解
- Python中的多处理与多线程:新手简介
- Fortran中的陷阱-NAMELIST