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

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

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

一、前言

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

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

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

二、說在前面的

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

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

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

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

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

三、不使用請(qǐng)求攔截

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

一個(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í),請(qǐng)重新登錄")
  this.$router.push("/login")
 //其余錯(cuò)誤狀態(tài)處理 
 }else if(data.data.code != 0){
  this.$Message.error(data.data.msg)
 //請(qǐng)求成功
 }else if(data.data.code === 0){
  //進(jìn)行成功業(yè)務(wù)邏輯
 }
 //.......
});

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

三、使用請(qǐng)求攔截

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

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

在main.js中

//請(qǐng)求發(fā)送攔截,把數(shù)據(jù)發(fā)送給后臺(tái)之前做些什么......
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ā)送給后臺(tái)
 return request;
}, function (error) {
 // Do something with request error
 return Promise.reject(error);
});
//請(qǐng)求返回?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í),請(qǐng)重新登錄");
 router.push("/login")
 //其余錯(cuò)誤狀態(tài)處理 
 } else if (response.data.code != 0) {
 iView.Message.error(response.data.msg)
 //請(qǐng)求成功
 } else if(response.data.code === 0){
 //將我們請(qǐng)求到的信息返回頁面中請(qǐng)求的邏輯
 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,如果請(qǐng)求的數(shù)據(jù)狀態(tài)code不為0,會(huì)被攔截,則data為undefined
 if(data){
  //進(jìn)行請(qǐng)求返回成功邏輯
 }
});

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

四、其他

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

請(qǐng)求簽名是前臺(tái)和后臺(tái)約定的一種溝通方式,對(duì)數(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,如果請(qǐng)求的數(shù)據(jù)狀態(tài)code不為0,會(huì)被攔截,則data為undefined
 if(data){
  //進(jìn)行請(qǐng)求返回成功邏輯
 }
});

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

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

//請(qǐng)求發(fā)送攔截
axios.interceptors.request.use((request) => {
 //獲取請(qǐng)求的數(shù)據(jù),這里是loginName和password
 let REQUEST_DATA = request.data
 //獲取請(qǐng)求的地址,這里是/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ā)送請(qǐng)求給后臺(tái)
 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();
 //請(qǐng)求用戶的session以及secretKey信息,為空是未登錄,登錄后我把它存在localStorage中,這個(gè)存在哪里都可以,這里只作為例子。
 postData.session = localStorage.getItem('session') || '';
 postData.secretKey = localStorage.getItem('secretKey') || '';
 //請(qǐng)求的地址,這里是/api/request
 postData.method = method;
 //請(qǐng)求的數(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
}

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

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

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

總結(jié)

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

相關(guān)文章

  • 深入理解Vue router的部分高級(jí)用法

    深入理解Vue router的部分高級(jí)用法

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

    vue組件的寫法匯總

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

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

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

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

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

    在iview+vue項(xiàng)目中使用自定義icon圖標(biāo)方式

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論