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 相关文章推荐
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
详解Python中的正则表达式的用法
2015/04/09 Python
python WindowsError的错误代码详解
2017/07/23 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
python爬取抖音视频的实例分析
2021/01/19 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
关于感恩的演讲稿500字
2014/08/26 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
婚礼新人答谢词
2015/01/04 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
收入证明申请书
2015/06/12 职场文书
PHP解决高并发问题
2021/04/01 PHP
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS