详解Angular.js中$http拦截器的介绍及使用


Posted in Javascript onJuly 04, 2017

前言

$http service在Angular中用于简化与后台的交互过程,其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互。在与后台的交互过程中,可能会对每条请求发送到Server之前进行预处理(如加入token),或者是在Server返回数据到达客户端还未被处理之前进行预处理(如将非JSON格式数据进行转换);当然还有可能对在请求和响应过程过发生的问题进行捕获处理。所有这些需求在开发中都非常常见,所以Angular为我们提供了$http拦截器,用来实现上述需求。

什么是拦截器

顾名思义,拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器,每个拦截器都是实现了某些特定方法的Factory:

详解Angular.js中$http拦截器的介绍及使用

实现拦截器

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 面向对象 命名空间
May 13 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
js字符串操作方法实例分析
May 06 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 #Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 #Javascript
详解node如何让一个端口同时支持https与http
Jul 04 #Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 #Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 #Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 #Javascript
You might like
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
python cs架构实现简单文件传输
2020/03/20 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python next()和iter()函数原理解析
2020/02/07 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
python新手学习可变和不可变对象
2020/06/11 Python
学python需要去培训机构吗
2020/07/01 Python
Python with语句用法原理详解
2020/07/03 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
校班主任推荐信范文
2013/12/03 职场文书
上班上网检讨书
2014/01/29 职场文书
大学校运会广播稿
2014/02/03 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书