angular中的http拦截器Interceptors的实现
在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'; varurl,params,method; //加盟店请求 mylog('jiamengdian::',sessionStorage.getItem("chainStorefrnId")); if(sessionStorage.getItem("chainStorefrnId")){ //增加操作人id,name和storeid等信息 //操作人姓名 varoperatorName=$.cookie("userType")=="employee"?decodeURI($.cookie("username")):decodeURI($.cookie("frnName")); //操作人id varoperatorId=$.cookie("userId"); //加盟店id varoperatorStoreId=$.cookie("frnId"); if(obj.method){ method=obj.method.toLowerCase(); }else{ method="get"; } //处理url,区分首次授信还是追加授信 varflag_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'); } elseif(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; } } returnobj; }, response:function(res){ $(".loading").hide(); returnres; }, 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的各类自定义错误
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。