小編給大家分享一下Vue中怎么使用axios請(qǐng)求攔截，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站設(shè)計(jì)、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序制作等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷(xiāo)、管理等多方位專(zhuān)業(yè)化運(yùn)作于一體。

一、前言

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

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

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

二、說(shuō)在前面的

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

以下友好提示均使用iview ui的message提示組件，例如this.$Message.xxx
/api/request  僅僅只是例子接口，實(shí)際開(kāi)發(fā)用后臺(tái)提供的接口。
code是后臺(tái)狀態(tài)碼，我這里也只是例子，不要問(wèn)我為毛我的返回碼和你的怎么不一樣這樣的問(wèn)題哈...這些都需要和后臺(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)求的問(wèn)題
因?yàn)槭褂玫氖沁@個(gè)請(qǐng)求頭所以需要用qs模塊，不然后臺(tái)不認(rèn)這個(gè)數(shù)據(jù)。

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

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

一個(gè)單純，沒(méi)有花里胡哨的頁(yè)面，|ω?）

//雙向數(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è)頁(yè)面有很多請(qǐng)求，那么頁(yè)面會(huì)變得很長(zhǎng)很臃腫，不好維護(hù)。

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

相同的請(qǐng)求返回代碼我們可以抽取出來(lái)，寫(xiě)在請(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ù)返回到頁(yè)面之前做些什么...
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)求到的信息返回頁(yè)面中請(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)求添加了攔截，可以減少很多代碼邏輯，頁(yè)面可讀性更高，可維護(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è)登錄頁(yè)面為例

//雙向數(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)求用戶(hù)的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)變啦。

以上是“Vue中怎么使用axios請(qǐng)求攔截”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：Vue中怎么使用axios請(qǐng)求攔截
本文URL：http://chinadenli.net/article6/ipgiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、軟件開(kāi)發(fā)、做網(wǎng)站、企業(yè)網(wǎng)站制作、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)