Angular中的interceptors拦截器


Posted in Javascript onJune 25, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所述;

<!DOCTYPE html>
<html ng-app="nickApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>interceptors</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  <script>
    /*
     $http service在Angular中用于简化与后台的交互过程,其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互。
     在与后台的交互过程中,可能会对每条请求发送到Server之前进行预处理(如加入token),或者是在Server返回数据到达客户端还未被处理之前进行预处理(如将非JSON格式数据进行转换);
     当然还有可能对在请求和响应过程过发生的问题进行捕获处理。所以Angular为我们提供了$http拦截器,用来实现上述需求。*/
    /*
     $httpProvider中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到该数组中的常规服务工厂。
     1 首先 创建一个拦截器服务工厂
     */
    angular.module('nickApp', [])
        .factory('NickInterceptor', ['$q', function ($q) {
          return {
            // 可选,拦截成功的请求
            /*
             该方法会在$http发送请求到后台之前执行,因此你可以修改配置或做其他的操作。
             该方法接收请求配置对象(request configuration object)作为参数,然后必须返回配置对象或者promise 。
             如果返回无效的配置对象或者 promise 则会被拒绝,导致$http 调用失败
             */
            request: function (config) {
              // 进行预处理
              // 例如加令牌
              config.headers['Authorization'] = 'token666';
              /*
               Request Headers
               token:token666 //加的令牌
               */
              return config || $q.when(config);
            },
            // 可选,拦截成功的响应
            /*
             该方法会在$http接收到从后台过来的响应之后执行,因此你可以修改响应或做其他操作。
             该方法接收响应对象(response object)作为参数,
             然后必须返回响应对象或者promise。响应对象包括了请求配置(request configuration),头(headers),状态(status)和从后台过来的数据(data)。
             如果返回无效的响应对象或者 promise 会被拒绝,导致$http调用失败。
             */
            response: function (response) {
              // 进行预处理
              // 例如 JSON.parse(response)等
              return response || $q.when(reponse);
            },
            // 可选,拦截失败的请求
            /*
             有时一个请求发送失败或者被拦截器拒绝了。requestError拦截器会捕获那些被上一个请求拦截器中断的请求。
             它可以用来恢复请求或者有时可以用来撤销请求之前所做的配置,比如关闭遮罩层,显示进度条,激活按钮和输入框之类的。
             */
            requestError: function (rejection) {
              // 对失败的请求进行处理
              // 例如 统一的弹窗提示
              return $q.reject(rejection);
            },
            // 可选,拦截失败的响应
            /*
             有时候我们后台调用失败了。也有可能它被一个请求拦截器拒绝了,或者被上一个响应拦截器中断了。
             在这种情况下,响应异常拦截器可以帮助我们恢复后台调用。
             */
            responseError: function (rejection) {
              // 对失败的响应进行处理
              // 例如 统一的弹窗提示
              return $q.reject(rejection);
            }
          };
        }])
        /*
         $httpProvider中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到该数组中的常规服务工厂。
         2 在config方法中,将拦截器加入到$httpProvider.interceptors数组中
         */
        .config(['$httpProvider', function ($httpProvider) {
          $httpProvider.interceptors.push('NickInterceptor');
        }])
        .controller('bodyCtl', ['$scope', '$http', function ($scope, $http) {
          $scope.test1 = function () {
            console.log(11);
            $http.get('interceptors.html');
          };
        }])
  </script>
</head>
<body ng-controller="bodyCtl">
<button class="btn" ng-click="test1()">click me</button>
<div ng-view></div>
</body>
</html>

以上所述是小编给大家介绍的Angular中的interceptors拦截器,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 #Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 #Javascript
Angular2.js实现表单验证详解
Jun 23 #Javascript
JS实现多张图片预览同步上传功能
Jun 23 #Javascript
Vue组件化通讯的实例代码
Jun 23 #Javascript
JavaScript字符串检索字符的方法
Jun 23 #Javascript
Angular2 组件通信的实例代码
Jun 23 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
在PWS上安装PHP4.0正式版
2006/10/09 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
javascript动态加载二
2012/08/22 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
深圳-东方伟业笔试部分
2015/02/11 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
主持人演讲稿范文
2013/12/28 职场文书
支部组织生活会方案
2014/06/10 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
生活委员竞选稿
2015/11/21 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers