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 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python3+PyQt5实现文档打印功能
2018/04/24 Python
python绘制简单彩虹图
2018/11/19 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
用python制作个音乐下载器
2021/01/30 Python
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
简历中个人求职的自我评价模板
2013/11/29 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
干部考核评语
2014/04/29 职场文书
教师考察材料范文
2014/06/03 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
用电申请报告范文
2015/05/18 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers