在Vue中使用axios請求攔截的實現(xiàn)方法
一、前言
axios的基礎(chǔ)使用就不過多的講解啦,如何使用可以看axios文檔使用說明·Axios中文說明
在這里和大家分享一下axios攔截在實際項目中的使用
很多人都看過axios的官方文檔中攔截器這一欄,有的人可能會有點懵,因為文檔只告訴你有這個東西,而不告訴你在什么情況下使用。很多初學者就會放棄使用axios攔截器,畢竟攔截器是可以不使用的,但是使用攔截器,會在頁面中減少很多不必要的代碼。
二、說在前面的
項目使用的ui框架是iview
以下友好提示均使用iview ui的message提示組件,例如this.$Message.xxx
/api/request 僅僅只是例子接口,實際開發(fā)用后臺提供的接口。
code是后臺狀態(tài)碼,我這里也只是例子,不要問我為毛我的返回碼和你的怎么不一樣這樣的問題哈...這些都需要和后臺溝通約定的。
使用的請求頭是:axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
;至于為什么使用這個請求頭可以看看我的另外一篇文章關(guān)于axios會發(fā)送兩次請求,有個OPTIONS請求的問題
因為使用的是這個請求頭所以需要用qs模塊,不然后臺不認這個數(shù)據(jù)。
三、不使用請求攔截
如果不使用請求攔截,也是可以的,但是會多了非常多的代碼,我們以登錄頁為例。
一個單純,沒有花里胡哨的頁面,|ω・)
//雙向數(shù)據(jù)綁定獲取值 let httpRequest = {}; httpRequest.loginName = this.loginName httpRequest.password= this.password this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => { //特殊錯誤處理,狀態(tài)為10時為登錄超時 if(data.data.code === 10){ this.$Message.error("登錄已超時,請重新登錄") this.$router.push("/login") //其余錯誤狀態(tài)處理 }else if(data.data.code != 0){ this.$Message.error(data.data.msg) //請求成功 }else if(data.data.code === 0){ //進行成功業(yè)務邏輯 } //....... });
如果不使用請求攔截,那么對每一條請求每一個狀態(tài)都要特殊處理,如果請求特殊狀態(tài)有數(shù)十個,每個頁面有很多請求,那么頁面會變得很長很臃腫,不好維護。
三、使用請求攔截
相同的請求返回代碼我們可以抽取出來,寫在請求攔截中
當我們設(shè)置了攔截之后,在我們的組件代碼中可以簡化很多,還是以登錄界面為例:
在main.js中
//請求發(fā)送攔截,把數(shù)據(jù)發(fā)送給后臺之前做些什么...... axios.interceptors.request.use((request) => { //這個例子中data是loginName和password let REQUEST_DATA = request.data //統(tǒng)一進行qs模塊轉(zhuǎn)換 request.data = qs.stringify(REQUEST_DATA) //再發(fā)送給后臺 return request; }, function (error) { // Do something with request error return Promise.reject(error); }); //請求返回攔截,把數(shù)據(jù)返回到頁面之前做些什么... axios.interceptors.response.use((response) => { //特殊錯誤處理,狀態(tài)為10時為登錄超時 if (response.data.code === 10) { iView.Message.error("登錄已超時,請重新登錄"); router.push("/login") //其余錯誤狀態(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){ //進行請求返回成功邏輯 } });
這樣我們就對axios請求添加了攔截,可以減少很多代碼邏輯,頁面可讀性更高,可維護性也更高
四、其他
這就是axios攔截的最基礎(chǔ)的用法,當然也不止于此,我們也可以進行擴展延伸,做更多的事情,只要你的業(yè)務有需求,axios攔截總能幫到你,這些就需要舉一反三,工具是死的人是活的,我可以再舉個小例子,比如設(shè)置請求簽名。
請求簽名是前臺和后臺約定的一種溝通方式,對數(shù)據(jù)進行加密,可以一定程度上保證數(shù)據(jù)的安全性
還是以這個登錄頁面為例
//雙向數(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){ //進行請求返回成功邏輯 } });
我們把httpRequest這個data信息數(shù)據(jù)發(fā)送給后臺之前,進行簽名,并加密數(shù)據(jù)
在main.js中,我們對發(fā)送的數(shù)據(jù)進行攔截
//請求發(fā)送攔截 axios.interceptors.request.use((request) => { //獲取請求的數(shù)據(jù),這里是loginName和password let REQUEST_DATA = request.data //獲取請求的地址,這里是/api/request let REQUEST_URL = request.url //設(shè)置簽名并進行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ù)不作展示,也是已封裝好的 postData.timestamp = getNowFormatDate(); //請求用戶的session以及secretKey信息,為空是未登錄,登錄后我把它存在localStorage中,這個存在哪里都可以,這里只作為例子。 postData.session = localStorage.getItem('session') || ''; postData.secretKey = localStorage.getItem('secretKey') || ''; //請求的地址,這里是/api/request postData.method = method; //請求的數(shù)據(jù)這里是loginName和password,進行base64加密 let base64Data = Base64.encode(JSON.stringify(data)); //設(shè)置簽名并進行md5加密 let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey); //把數(shù)據(jù)再次進行加密 postData.data = encodeURI(base64Data); postData.signature = signature; return postData }
這樣我們就完成了對數(shù)據(jù)加密以及簽名,這樣再發(fā)送給后臺。
注意:這里只作為例子展示,如果需要用到簽名,如何簽名,是前臺和后臺溝通的結(jié)果!
axios請求攔截的用處遠遠不止這樣,具體如何使用,還需要在實際工作,實際項目中隨機應變啦。
總結(jié)
以上所述是小編給大家介紹的在Vue中使用axios請求攔截的實現(xiàn)方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))
這篇文章主要介紹了Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09Vue+LogicFlow+Flowable實現(xiàn)工作流
本文主要介紹了Vue+LogicFlow+Flowable實現(xiàn)工作流,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情詳解
這篇文章主要給大家介紹了關(guān)于vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-12-12