详解为Angular.js内置$http服务添加拦截器的方法


Posted in Javascript onDecember 20, 2016

前言

在Angular框架中,创建团队为使用者进行了Ajax请求的封装,并通过$http服务暴露出相关的接口.Angular在其官方文档中指出, $http服务底层针对Web常见的安全攻击做出了相应的对策,也就是说使用$http服务封装的Ajax为使用者提供了更为安全的保障.作为一个框架,保证框架的可用性,适配性是很有必要的. Angular在设计,实现中也体现出来了这样的良好风格.我们通常在使用Ajax时,有时候希望我们能够在请求发起前或接收到请求后做一些相应的处理工作,比如:在请求发起前,在请求头中添加一下报文段.在请求返回时对一请求处理状态做一些管理,如统一处理404状态等等.Angular的$http服务在设计实现时充分考虑到了上述的情况.接下来,我们一起来学习和了解一下如何为$http服务添加拦截器,以及如何在我们自己实现的服务中实现类似的拦截器机制.

什么是拦截器?What are Interceptors?

Interceptor(拦截器)在服务端框架中属于一种比较常见的机制,如spring,Struts2等Java框架中拦截器属于基本配置项.拦截器提供了一种机制可以使开发者可以定义在一个action(动作)执行的前后执行的代码,这些代码可以是在一个action执行前阻止其执行的代码,也可以是修改目标动作某些行为的代码.(在AOP(Aspect-Oriented Programming)中拦截器用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作。在Spring框架中比较常见)

$http服务中的拦截器

查看API或是源码我们可以发现,Angular的实现中通过 httpProvider提供了一个名为interceptors的数组.这个数组接受拦截器服务注册,通过过程次的注册最终会形成拦截器链.这样每次在调用http服务的时候,angular都会通过我们定义的拦截点(切面)进行相应的Ajax动作修改.理论就不多说了,下面开始进入实战:

Angular中如何声明一个拦截器

// Interceptor declaration
module.factory('httpInterceptor', ['$log', function($log) {
  $log.debug('$log is here to show you that this is a regular factory with injection');

  return { 
      // do something
      };
}]);

如何将声明的拦截器注册到$http服务中

// Add the interceptor to $httpProvider.interceptors
module.config(['$httpProvider', function($httpProvider) { 
  $httpProvider.interceptors.push('httpInterceptor');
}]);

通过上面的简单两个步骤,我们基本就完成了http服务的拦截器编写与添加.但是上面的代码片段并不能实际使用,要想真正的实现拦截操作,我们还需要遵循http服务暴露出来的可以进行拦截的点进行相关的代码编写.

$httpProvider暴露了那些可以拦截的点?

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

对于上面暴露出来的接口使用也是异常的简单的,我们可以像声明一个简单的服务一样声明一个$http服务的拦截器,并交由angular的注入机制去使用我们配置的拦截器.

// 如同声明一个Angular服务一样声明一个拦截器
module.factory('sessionInjector', ['authService', function (authService){
  return {
    request: function (config){
      if (!authService.isAnonymus) {
        config.headers['x-session-token'] = authService.token;
      }
      return config;
    }
  };
}]);

// 然后将我们声明的拦截器添加到$httpProvider的拦截器链中,之后的服务注入Angular会负责帮我们完善
module.config(['$httpProvider', function ($httpProvider){
  $httpProvider.interceptors.push('sessionInjector');
}]);

$http服务拦截器的异步支持

部分场景下,我们希望在拦截器中能够执行一些异步操作.然后依据不同的处理结果进行不同的拦截操作,AngularJS在设计的时候也很好的支持了这一特性.AngularJS允许我们在拦截的方法中,我们可以返回一个promise对象.如在http服务中,我们如果返回一个promise对象时,http服务将会延迟发起网络请求或是延迟响应请求结果.

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;
    },
    response: function(response) {
          var deferred = $q.defer();
          someAsyncService.doAsyncOperation().then(function() {
            // Asynchronous operation succeeded, modify response accordingly
            ...
            deferred.resolve(response);
          }, function() {
            // Asynchronous operation failed, modify response accordingly
            ...
            deferred.resolve(response);
          });
          return deferred.promise;
        }
  };

  return requestInterceptor;
}]);

上面的例子中,在请求发起时,如果对应的deferred被拒绝,http请求则会失败(如果进行抓包分析的话,你会发现http请求并没有发起).在请求进行响应时,如果deferred被拒绝,则请求也会失败.(抓包分析,网络请求是有返回的).

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
JS实现图片切换特效
Dec 23 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 #Javascript
JS简单实现表格排序功能示例
Dec 20 #Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 #Javascript
js定时器实例分享
Dec 20 #Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 #Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 #Javascript
详解Jquery的事件操作和文档操作
Dec 19 #Javascript
You might like
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python显示生日是星期几的方法
2015/05/27 Python
python中引用与复制用法实例分析
2015/06/04 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
Python requests模块实例用法
2019/02/11 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
python 如何调用 dubbo 接口
2020/09/24 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
2014全国两会大学生学习心得体会
2014/03/10 职场文书
教师节演讲稿
2014/05/06 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
企业财务管理制度范本
2015/08/04 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
如何理解及使用Python闭包
2021/06/01 Python