详解为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 相关文章推荐
jQuery动态修改超链接地址的方法
Feb 13 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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
PHP实现分页的一个示例
2006/10/09 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python的faker库用法
2019/11/28 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
网络教育自我鉴定
2014/02/04 职场文书
安全宣传标语口号
2014/06/06 职场文书
小学教师师德整改措施
2014/09/29 职场文书
文明家庭事迹材料
2014/12/20 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA