小編給大家分享一下Vue中怎么使用axios請求攔截,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)主要從事網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)(電腦版網(wǎng)站建設(shè))、wap網(wǎng)站建設(shè)(手機(jī)版網(wǎng)站建設(shè))、響應(yīng)式網(wǎng)站設(shè)計(jì)、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序制作等,憑借多年來在互聯(lián)網(wǎng)的打拼,我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷經(jīng)驗(yàn),集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等多方位專業(yè)化運(yùn)作于一體。
一、前言
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)變啦。
以上是“Vue中怎么使用axios請求攔截”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前標(biāo)題:Vue中怎么使用axios請求攔截
本文URL:http://muchs.cn/article6/ipgiog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、軟件開發(fā)、做網(wǎng)站、企業(yè)網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)