angular中的http拦截器Interceptors的实现


Posted in Javascript onFebruary 21, 2017

在angularJs中增加了一个对全局的http请求统一做出处理的api--interceptors

Interceptors 有两个处理时机,分别是:

  • 其它程序代码执行 HTTP 请求之后,在实际从浏览器发出请求之前,即处理请求
  • 得到请求的响应之后,在交给其它程序代码处理之前,即处理请求的响应

其引用场景包括

  • 全局处理错误
  • 统一进行身份验证一类的处理
  • 对所有发出去的请求进行预处理
  • 对所有收到的响应进行预处理等等

使用实例如下:

commonService.config(['$httpProvider',function($httpProvider){

    //$httpProvider.defaults.headers.common = {'X-Auth-Token': $.cookie('x_auth_token'),'Content-Type':'application/json;charset=UTF-8'};

    //添加拦截器;

    $httpProvider.interceptors.push(function ($q) {

      return {

        request: function (obj) {
               

          $('.loading').show();

          obj.headers['X-Auth-Token'] = $.cookie('x_auth_token');

          if(!obj.headers['Content-Type'])

            obj.headers['Content-Type'] = 'application/json;charset=UTF-8';

 

          var url, params,method;

       

          //加盟店请求

          mylog('jiamengdian::',sessionStorage.getItem("chainStorefrnId"));

          if(sessionStorage.getItem("chainStorefrnId")){

            //增加操作人id,name和storeid等信息

            //操作人姓名

            var operatorName = $.cookie("userType") == "employee" ? decodeURI($.cookie("username")) : decodeURI($.cookie("frnName"));

            //操作人id

            var operatorId = $.cookie("userId");

            //加盟店id

            var operatorStoreId = $.cookie("frnId");

            if (obj.method) {

              method = obj.method.toLowerCase();

            } else {

              method = "get";

            }

            //处理url,区分首次授信还是追加授信

            var flag_url = sessionStorage.getItem('chainStoreFlag');

            mylog('flag_url',flag_url);

            if(flag_url && flag_url == "firstcredit"){

 

              //提交需要加上加盟店标识

              if(obj.url.indexOf("firstcredit/createPerFirstCredit")!=-1){

                //标识个人提交

                obj.url = obj.url.replace('firstcredit/createPerFirstCredit','firstcredit/perFirstCreditByFranchisee');

              }

              else if(obj.url.indexOf("firstcredit/createBusiFirstCredit")!=-1){

                //标识企业提交

                obj.url = obj.url.replace('firstcredit/createBusiFirstCredit','firstcredit/createBusiFirstCreditByFranchisee');

              }

             
              } else {

                url = obj.url + "?creditType=1&operatorName=" + operatorName + "&operatorId=" + operatorId + "&operatorStoreId=" + operatorStoreId;

               }

            }

          return obj;

        },

        response: function (res) {

          $(".loading").hide();

          return res;

        },

        responseError: function (err) {

          $(".loading").hide();

          return $q.reject(err);

        }

      };

    });

  }]);

改api共有4个方法,分别为request ,requestError ,response ,responseError ,这个四个方法非必选,可根据需要调用,前两个是请求的前置处理,后两个是针对请求的响应的处理。

  • request :接收一个参数,它是 $http 中的标准 config 对象,同时也需要返回一个标准 config ,此时可以添加各类身份验证信息,同时也可在此启动进度条
  • requestError :当有多个 Interceptor 的时候, requestError 会在前一个 Interceptor 抛出错误或者执行 $q.reject() 时执行,接收的参数就对应的错误
  • response :接受一个请求对象参数,可以不处理就直接返回,此时也可以将进度条显示为成功完成,当然,如果后端 API 返回自定义错误时,HTTP 的状态码仍然是 200 得话,便在这里处理自定义错误,也可以对返回数据做一些处理,注意要将进度条置为完成
  • responseError :这个是重头戏,即可以处理标准的 Http 错误,如服务器没有响应时,或者 PHP 之类的 CGI 经常出现的 502 一类,还可以处理 HTTP 状态码不是 200 的各类自定义错误

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
vue中的inject学习教程
Apr 24 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
Vue实现多标签选择器
Nov 28 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 #Javascript
vue-resource 拦截器使用详解
Feb 21 #Javascript
微信小程序 template模板详解及实例
Feb 21 #Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 #Javascript
Angular实现购物车计算示例代码
Feb 21 #Javascript
原生js实现倒计时--2018
Feb 21 #Javascript
vue-router:嵌套路由的使用方法
Feb 21 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Array对象方法参考
2006/10/03 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
angular内置provider之$compileProvider详解
2017/09/27 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
Collection和Collections的区别
2016/05/02 面试题
一道SQL面试题
2012/12/31 面试题
上课说话检讨书
2015/01/27 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript