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 当前日期加(天、周、月、年)
Aug 09 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
提取HTML标签
2006/10/09 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
srcElement表格样式
2006/09/03 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
劳动保障个人工作总结
2015/03/04 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
人生遥控器观后感
2015/06/11 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书