前言

在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被拒绝,则请求也会失败.(抓包分析,网络请求是有返回的).

总结

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

# angularjs  # 拦截器  # http拦截器  # angular2  # 浅析AngularJs HTTP响应拦截器  # 快速学习AngularJs HTTP响应拦截器  # 详解Angular.js中$http拦截器的介绍及使用  # 我们可以  # 可以实现  # 被拒  # 会在  # 则会  # 这一  # 是在  # 也有  # 很好  # 也会  # 出了  # 是有  # 将会  # 说了  # 拒绝了  # 不多  # 很有  # 其他的  # 可用性 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Android实现代码画虚线边框背景效果  Java垃圾回收器的方法和原理总结  香港服务器网站推广：SEO优化与外贸独立站搭建策略  如何在VPS电脑上快速搭建网站？  Laravel如何实现多对多模型关联？（Eloquent教程）  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  Laravel如何实现本地化和多语言支持？（i18n教程）  Laravel Seeder填充数据教程_Laravel模型工厂Factory使用  原生JS实现图片轮播切换效果  再谈Python中的字符串与字符编码（推荐）  EditPlus 正则表达式 实战(3)  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  如何在建站宝盒中设置产品搜索功能？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  个人网站制作流程图片大全,个人网站如何注销？  音响网站制作视频教程,隆霸音响官方网站？  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  长沙企业网站制作哪家好,长沙水业集团官方网站？  如何在云服务器上快速搭建个人网站？  广州网站制作公司哪家好一点,广州欧莱雅百库网络科技有限公司官网？  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  js实现获取鼠标当前的位置  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  ChatGPT 4.0官网入口地址 ChatGPT在线体验官网  Laravel Fortify是什么，和Jetstream有什么关系  javascript基本数据类型及类型检测常用方法小结  高端建站三要素：定制模板、企业官网与响应式设计优化  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  想要更高端的建设网站，这些原则一定要坚持！  Laravel模型事件有哪些_Laravel Model Event生命周期详解  深圳网站制作的公司有哪些,dido官方网站？  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  零基础网站服务器架设实战：轻量应用与域名解析配置指南  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  html5的keygen标签为什么废弃_替代方案说明【解答】  Laravel怎么为数据库表字段添加索引以优化查询  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  Python进程池调度策略_任务分发说明【指导】  PythonWeb开发入门教程_Flask快速构建Web应用  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  如何在IIS中新建站点并解决端口绑定冲突？  如何在浏览器中启用Flash_2025年继续使用Flash Player的方法【过时】