欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年10月25日 16:37:03   作者:你響度講D咩嘢  
這篇文章主要介紹了在Vue中使用axios請求攔截,需要的朋友可以參考下

一、前言

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 router的部分高級用法

    深入理解Vue router的部分高級用法

    這篇文章主要介紹了Vue router的部分高級用法,主要是針對已經(jīng)有初步了解Vue-router的人,通過本文主要給大家介紹路由元信息,滾動行為以及路由懶加載這幾個的使用方法。感興趣的朋友一起看看吧
    2018-08-08
  • vue組件的寫法匯總

    vue組件的寫法匯總

    組件化是為了方便代碼復用,提高開發(fā)效率。今天腳本之家小編給大家分享常見的vue組件寫法四種,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2018-04-04
  • Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))

    Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))

    這篇文章主要介紹了Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • Vue+LogicFlow+Flowable實現(xiàn)工作流

    Vue+LogicFlow+Flowable實現(xiàn)工作流

    本文主要介紹了Vue+LogicFlow+Flowable實現(xiàn)工作流,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-12-12
  • 在iview+vue項目中使用自定義icon圖標方式

    在iview+vue項目中使用自定義icon圖標方式

    這篇文章主要介紹了在iview+vue項目中使用自定義icon圖標方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue3如何直接修改reactive定義的變量

    vue3如何直接修改reactive定義的變量

    這篇文章主要介紹了vue3如何直接修改reactive定義的變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • Vue3 封裝回到頂部組件的實現(xiàn)示例

    Vue3 封裝回到頂部組件的實現(xiàn)示例

    回到頂部在很多網(wǎng)頁中都可以見到,本文主要介紹了Vue3 封裝回到頂部組件的實現(xiàn)示例,文中根據(jù)實例編碼詳細介紹的十分詳盡,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • 一文詳解Vue中加上key后發(fā)生什么

    一文詳解Vue中加上key后發(fā)生什么

    本文主要介紹了一文詳解Vue中加上key后發(fā)生什么,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-04-04
  • vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情詳解

    vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情詳解

    這篇文章主要給大家介紹了關(guān)于vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • Vue.js?前端路由和異步組件介紹

    Vue.js?前端路由和異步組件介紹

    這篇文章主要介紹了Vue.js?前端路由和異步組件介紹,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-09-09

最新評論