国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

在Vue中使用axios請求攔截的實(shí)現(xiàn)方法

來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:05:51
文檔

在Vue中使用axios請求攔截的實(shí)現(xiàn)方法

在Vue中使用axios請求攔截的實(shí)現(xiàn)方法:一、前言 axios的基礎(chǔ)使用就不過多的講解啦,如何使用可以看axios文檔使用說明·Axios中文說明 在這里和大家分享一下axios攔截在實(shí)際項(xiàng)目中的使用 很多人都看過axios的官方文檔中攔截器這一欄,有的人可能會有點(diǎn)懵,因?yàn)槲臋n只告訴你有這個(gè)東西,而不告訴你在
推薦度:
導(dǎo)讀在Vue中使用axios請求攔截的實(shí)現(xiàn)方法:一、前言 axios的基礎(chǔ)使用就不過多的講解啦,如何使用可以看axios文檔使用說明·Axios中文說明 在這里和大家分享一下axios攔截在實(shí)際項(xiàng)目中的使用 很多人都看過axios的官方文檔中攔截器這一欄,有的人可能會有點(diǎn)懵,因?yàn)槲臋n只告訴你有這個(gè)東西,而不告訴你在

一、前言

axios的基礎(chǔ)使用就不過多的講解啦,如何使用可以看axios文檔使用說明·Axios中文說明

在這里和大家分享一下axios攔截在實(shí)際項(xiàng)目中的使用

很多人都看過axios的官方文檔中攔截器這一欄,有的人可能會有點(diǎn)懵,因?yàn)槲臋n只告訴你有這個(gè)東西,而不告訴你在什么情況下使用。很多初學(xué)者就會放棄使用axios攔截器,畢竟攔截器是可以不使用的,但是使用攔截器,會在頁面中減少很多不必要的代碼。

二、說在前面的

項(xiàng)目使用的ui框架是iview

以下友好提示均使用iview ui的message提示組件,例如this.$Message.xxx

/api/request 僅僅只是例子接口,實(shí)際開發(fā)用后臺提供的接口。

code是后臺狀態(tài)碼,我這里也只是例子,不要問我為毛我的返回碼和你的怎么不一樣這樣的問題哈...這些都需要和后臺溝通約定的。

使用的請求頭是:axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';至于為什么使用這個(gè)請求頭可以看看我的另外一篇文章關(guān)于axios會發(fā)送兩次請求,有個(gè)OPTIONS請求的問題
因?yàn)槭褂玫氖沁@個(gè)請求頭所以需要用qs模塊,不然后臺不認(rèn)這個(gè)數(shù)據(jù)。

三、不使用請求攔截

如果不使用請求攔截,也是可以的,但是會多了非常多的代碼,我們以登錄頁為例。

一個(gè)單純,沒有花里胡哨的頁面,|ω・)

//雙向數(shù)據(jù)綁定獲取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
 //特殊錯(cuò)誤處理,狀態(tài)為10時(shí)為登錄超時(shí)
 if(data.data.code === 10){
 this.$Message.error("登錄已超時(shí),請重新登錄")
 this.$router.push("/login")
 //其余錯(cuò)誤狀態(tài)處理 
 }else if(data.data.code != 0){
 this.$Message.error(data.data.msg)
 //請求成功
 }else if(data.data.code === 0){
 //進(jìn)行成功業(yè)務(wù)邏輯
 }
 //.......
});

如果不使用請求攔截,那么對每一條請求每一個(gè)狀態(tài)都要特殊處理,如果請求特殊狀態(tài)有數(shù)十個(gè),每個(gè)頁面有很多請求,那么頁面會變得很長很臃腫,不好維護(hù)。

三、使用請求攔截

相同的請求返回代碼我們可以抽取出來,寫在請求攔截中

當(dāng)我們設(shè)置了攔截之后,在我們的組件代碼中可以簡化很多,還是以登錄界面為例:

在main.js中

//請求發(fā)送攔截,把數(shù)據(jù)發(fā)送給后臺之前做些什么......
axios.interceptors.request.use((request) => {
 //這個(gè)例子中data是loginName和password
 let REQUEST_DATA = request.data
 //統(tǒng)一進(jìn)行qs模塊轉(zhuǎn)換
 request.data = qs.stringify(REQUEST_DATA)
 //再發(fā)送給后臺
 return request;
}, function (error) {
 // Do something with request error
 return Promise.reject(error);
});
//請求返回?cái)r截,把數(shù)據(jù)返回到頁面之前做些什么...
axios.interceptors.response.use((response) => {
 //特殊錯(cuò)誤處理,狀態(tài)為10時(shí)為登錄超時(shí)
 if (response.data.code === 10) {
 iView.Message.error("登錄已超時(shí),請重新登錄");
 router.push("/login")
 //其余錯(cuò)誤狀態(tài)處理 
 } else if (response.data.code != 0) {
 iView.Message.error(response.data.msg)
 //請求成功
 } else if(response.data.code === 0){
 //將我們請求到的信息返回頁面中請求的邏輯
 return response;
 }
 //......
}, function (error) {
 return Promise.reject(error);
});
//雙向數(shù)據(jù)綁定獲取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
 //這是要先判斷data,如果請求的數(shù)據(jù)狀態(tài)code不為0,會被攔截,則data為undefined
 if(data){
 //進(jìn)行請求返回成功邏輯
 }
});

這樣我們就對axios請求添加了攔截,可以減少很多代碼邏輯,頁面可讀性更高,可維護(hù)性也更高

四、其他

這就是axios攔截的最基礎(chǔ)的用法,當(dāng)然也不止于此,我們也可以進(jìn)行擴(kuò)展延伸,做更多的事情,只要你的業(yè)務(wù)有需求,axios攔截總能幫到你,這些就需要舉一反三,工具是死的人是活的,我可以再舉個(gè)小例子,比如設(shè)置請求簽名。

請求簽名是前臺和后臺約定的一種溝通方式,對數(shù)據(jù)進(jìn)行加密,可以一定程度上保證數(shù)據(jù)的安全性

還是以這個(gè)登錄頁面為例

//雙向數(shù)據(jù)綁定獲取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
 //這是要先判斷data,如果請求的數(shù)據(jù)狀態(tài)code不為0,會被攔截,則data為undefined
 if(data){
 //進(jìn)行請求返回成功邏輯
 }
});

我們把httpRequest這個(gè)data信息數(shù)據(jù)發(fā)送給后臺之前,進(jìn)行簽名,并加密數(shù)據(jù)

在main.js中,我們對發(fā)送的數(shù)據(jù)進(jìn)行攔截

//請求發(fā)送攔截
axios.interceptors.request.use((request) => {
 //獲取請求的數(shù)據(jù),這里是loginName和password
 let REQUEST_DATA = request.data
 //獲取請求的地址,這里是/api/request
 let REQUEST_URL = request.url
 //設(shè)置簽名并進(jìn)行qs轉(zhuǎn)換,且賦值給request的data,簽名函數(shù)另外封裝
 request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
 //發(fā)送請求給后臺
 return request;
}, function (error) {
 // Do something with request error
 return Promise.reject(error);
});
//已封裝好的簽名函數(shù)
function requestDataFn(data, method) {
 let postData = {}
 //時(shí)間戳,時(shí)間戳函數(shù)不作展示,也是已封裝好的
 postData.timestamp = getNowFormatDate();
 //請求用戶的session以及secretKey信息,為空是未登錄,登錄后我把它存在localStorage中,這個(gè)存在哪里都可以,這里只作為例子。
 postData.session = localStorage.getItem('session') || '';
 postData.secretKey = localStorage.getItem('secretKey') || '';
 //請求的地址,這里是/api/request
 postData.method = method;
 //請求的數(shù)據(jù)這里是loginName和password,進(jìn)行base64加密
 let base64Data = Base64.encode(JSON.stringify(data));
 //設(shè)置簽名并進(jìn)行md5加密
 let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
 //把數(shù)據(jù)再次進(jìn)行加密
 postData.data = encodeURI(base64Data);
 postData.signature = signature;
 return postData
}

這樣我們就完成了對數(shù)據(jù)加密以及簽名,這樣再發(fā)送給后臺。

注意:這里只作為例子展示,如果需要用到簽名,如何簽名,是前臺和后臺溝通的結(jié)果!

axios請求攔截的用處遠(yuǎn)遠(yuǎn)不止這樣,具體如何使用,還需要在實(shí)際工作,實(shí)際項(xiàng)目中隨機(jī)應(yīng)變啦。

總結(jié)

以上所述是小編給大家介紹的在Vue中使用axios請求攔截的實(shí)現(xiàn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

在Vue中使用axios請求攔截的實(shí)現(xiàn)方法

在Vue中使用axios請求攔截的實(shí)現(xiàn)方法:一、前言 axios的基礎(chǔ)使用就不過多的講解啦,如何使用可以看axios文檔使用說明·Axios中文說明 在這里和大家分享一下axios攔截在實(shí)際項(xiàng)目中的使用 很多人都看過axios的官方文檔中攔截器這一欄,有的人可能會有點(diǎn)懵,因?yàn)槲臋n只告訴你有這個(gè)東西,而不告訴你在
推薦度:
標(biāo)簽: ios VUE 攔截
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 图片一区| 欧美日韩综合 | 欧美国产高清 | 精品日韩一区二区三区视频 | 97精品国产91久久久久久久 | 久久综合爱 | 欧美亚洲综合在线观看 | 欧美人与禽zozzo性伦交 | 免费看全黄特黄毛片 | 国产精品区在线12p 国产精选在线 | 全网毛片免费 | 亚洲国产天堂久久九九九 | 精品视频二区 | 国产一区 在线播放 | 欧美另类色图 | 国产成人乱码一区二区三区 | 国产成人精品在线 | 欧美日韩国产在线观看 | 一级大黄毛片 | 久久精品视频一区 | 国产精品久久成人影院 | 欧美v亚洲v国产v | 亚洲一区综合 | 在线观看亚洲视频 | 亚洲欧美综合另类 | 欧美一区二区高清 | 成人国产精品一区二区网站 | 午夜国产在线 | 国产在线一区二区三区 | 亚洲 欧美 日韩在线一区 | 久热中文字幕在线精品首页 | 日韩欧美激情 | 国产日韩欧美 | 国产伦精品一区二区三区免 | 精品日韩欧美 | 亚洲精品视频在线观看免费 | 国内精品伊人久久大香线焦 | 国产成人91一区二区三区 | 午夜在线视频一区二区三区 | 国产欧美在线播放 | 亚洲欧美精品在线 |