angular中的http攔截器Interceptors的實(shí)現(xiàn)
在angularJs中增加了一個(gè)對(duì)全局的http請(qǐng)求統(tǒng)一做出處理的api--interceptors
Interceptors 有兩個(gè)處理時(shí)機(jī),分別是:
- 其它程序代碼執(zhí)行 HTTP 請(qǐng)求之后,在實(shí)際從瀏覽器發(fā)出請(qǐng)求之前,即處理請(qǐng)求
- 得到請(qǐng)求的響應(yīng)之后,在交給其它程序代碼處理之前,即處理請(qǐng)求的響應(yīng)
其引用場(chǎng)景包括
- 全局處理錯(cuò)誤
- 統(tǒng)一進(jìn)行身份驗(yàn)證一類(lèi)的處理
- 對(duì)所有發(fā)出去的請(qǐng)求進(jìn)行預(yù)處理
- 對(duì)所有收到的響應(yīng)進(jìn)行預(yù)處理等等
使用實(shí)例如下:
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; //加盟店請(qǐng)求 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,區(qū)分首次授信還是追加授信 var flag_url = sessionStorage.getItem('chainStoreFlag'); mylog('flag_url',flag_url); if(flag_url && flag_url == "firstcredit"){ //提交需要加上加盟店標(biāo)識(shí) if(obj.url.indexOf("firstcredit/createPerFirstCredit")!=-1){ //標(biāo)識(shí)個(gè)人提交 obj.url = obj.url.replace('firstcredit/createPerFirstCredit','firstcredit/perFirstCreditByFranchisee'); } else if(obj.url.indexOf("firstcredit/createBusiFirstCredit")!=-1){ //標(biāo)識(shí)企業(yè)提交 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個(gè)方法,分別為request ,requestError ,response ,responseError ,這個(gè)四個(gè)方法非必選,可根據(jù)需要調(diào)用,前兩個(gè)是請(qǐng)求的前置處理,后兩個(gè)是針對(duì)請(qǐng)求的響應(yīng)的處理。
- request :接收一個(gè)參數(shù),它是 $http 中的標(biāo)準(zhǔn) config 對(duì)象,同時(shí)也需要返回一個(gè)標(biāo)準(zhǔn) config ,此時(shí)可以添加各類(lèi)身份驗(yàn)證信息,同時(shí)也可在此啟動(dòng)進(jìn)度條
- requestError :當(dāng)有多個(gè) Interceptor 的時(shí)候, requestError 會(huì)在前一個(gè) Interceptor 拋出錯(cuò)誤或者執(zhí)行 $q.reject() 時(shí)執(zhí)行,接收的參數(shù)就對(duì)應(yīng)的錯(cuò)誤
- response :接受一個(gè)請(qǐng)求對(duì)象參數(shù),可以不處理就直接返回,此時(shí)也可以將進(jìn)度條顯示為成功完成,當(dāng)然,如果后端 API 返回自定義錯(cuò)誤時(shí),HTTP 的狀態(tài)碼仍然是 200 得話,便在這里處理自定義錯(cuò)誤,也可以對(duì)返回?cái)?shù)據(jù)做一些處理,注意要將進(jìn)度條置為完成
- responseError :這個(gè)是重頭戲,即可以處理標(biāo)準(zhǔn)的 Http 錯(cuò)誤,如服務(wù)器沒(méi)有響應(yīng)時(shí),或者 PHP 之類(lèi)的 CGI 經(jīng)常出現(xiàn)的 502 一類(lèi),還可以處理 HTTP 狀態(tài)碼不是 200 的各類(lèi)自定義錯(cuò)誤
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳細(xì)介紹RxJS在Angular中的應(yīng)用
本篇文章主要介紹了詳細(xì)介紹RxJS在Angular中的應(yīng)用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09AngularJS中的指令實(shí)踐開(kāi)發(fā)指南(二)
這篇文章主要介紹了AngularJS中的指令實(shí)踐指南(二)的相關(guān)資料,需要的朋友可以參考下2016-03-03angularJs中orderBy篩選以及filter過(guò)濾數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs中orderBy篩選以及filter過(guò)濾數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫(huà)
這篇文章主要介紹了Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫(huà),需要的朋友可以參考下2017-05-05AngularJS實(shí)現(xiàn)的自定義過(guò)濾器簡(jiǎn)單示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的自定義過(guò)濾器,結(jié)合實(shí)例形式分析了AngularJS自定義過(guò)濾器的簡(jiǎn)單定義與使用操作技巧,需要的朋友可以參考下2019-02-02AngularJs動(dòng)態(tài)加載模塊和依賴(lài)注入詳解
這篇文章主要為大家介紹了AngularJs動(dòng)態(tài)加載模塊和依賴(lài)注入,感興趣的小伙伴們可以參考一下2016-01-01淺談angular4實(shí)際項(xiàng)目搭建總結(jié)
本篇文章主要介紹了淺談angular4實(shí)際項(xiàng)目搭建總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12Angular動(dòng)畫(huà)實(shí)現(xiàn)的2種方式以及添加購(gòu)物車(chē)動(dòng)畫(huà)實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Angular動(dòng)畫(huà)的2種方式以及添加購(gòu)物車(chē)動(dòng)畫(huà)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08