這期內容當中小編將會給大家?guī)碛嘘P怎么在Vue中利用axios攔截請求，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)-專業(yè)網站定制、快速模板網站建設、高性價比泗水網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式泗水網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋泗水地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。

項目使用的ui框架是iview

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

/api/request 僅僅只是例子接口，實際開發(fā)用后臺提供的接口。

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

使用的請求頭是：axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';至于為什么使用這個請求頭可以看看我的另外一篇文章關于axios會發(fā)送兩次請求，有個OPTIONS請求的問題
因為使用的是這個請求頭所以需要用qs模塊，不然后臺不認這個數據。

不使用請求攔截

如果不使用請求攔截，也是可以的，但是會多了非常多的代碼，我們以登錄頁為例。

一個單純，沒有花里胡哨的頁面，|ω?）

//雙向數據綁定獲取值
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)有數十個，每個頁面有很多請求，那么頁面會變得很長很臃腫，不好維護。

使用請求攔截

相同的請求返回代碼我們可以抽取出來，寫在請求攔截中

當我們設置了攔截之后，在我們的組件代碼中可以簡化很多，還是以登錄界面為例：

在main.js中

//請求發(fā)送攔截，把數據發(fā)送給后臺之前做些什么......
axios.interceptors.request.use((request) => {
 //這個例子中data是loginName和password
 let REQUEST_DATA = request.data
 //統(tǒng)一進行qs模塊轉換
 request.data = qs.stringify(REQUEST_DATA)
 //再發(fā)送給后臺
 return request;
}, function (error) {
 // Do something with request error
 return Promise.reject(error);
});
//請求返回攔截，把數據返回到頁面之前做些什么...
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);
});
//雙向數據綁定獲取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
 //這是要先判斷data，如果請求的數據狀態(tài)code不為0,會被攔截，則data為undefined
 if(data){
  //進行請求返回成功邏輯
 }
});

這樣我們就對axios請求添加了攔截，可以減少很多代碼邏輯，頁面可讀性更高，可維護性也更高

其他

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

請求簽名是前臺和后臺約定的一種溝通方式，對數據進行加密，可以一定程度上保證數據的安全性

還是以這個登錄頁面為例

//雙向數據綁定獲取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
 //這是要先判斷data，如果請求的數據狀態(tài)code不為0,會被攔截，則data為undefined
 if(data){
  //進行請求返回成功邏輯
 }
});

我們把httpRequest這個data信息數據發(fā)送給后臺之前，進行簽名，并加密數據

在main.js中，我們對發(fā)送的數據進行攔截

//請求發(fā)送攔截
axios.interceptors.request.use((request) => {
 //獲取請求的數據，這里是loginName和password
 let REQUEST_DATA = request.data
 //獲取請求的地址，這里是/api/request
 let REQUEST_URL = request.url
 //設置簽名并進行qs轉換，且賦值給request的data，簽名函數另外封裝
 request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
 //發(fā)送請求給后臺
 return request;
}, function (error) {
 // Do something with request error
 return Promise.reject(error);
});
//已封裝好的簽名函數
function requestDataFn(data, method) {
 let postData = {}
 //時間戳，時間戳函數不作展示，也是已封裝好的
 postData.timestamp = getNowFormatDate();
 //請求用戶的session以及secretKey信息,為空是未登錄，登錄后我把它存在localStorage中，這個存在哪里都可以，這里只作為例子。
 postData.session = localStorage.getItem('session') || '';
 postData.secretKey = localStorage.getItem('secretKey') || '';
 //請求的地址，這里是/api/request
 postData.method = method;
 //請求的數據這里是loginName和password，進行base64加密
 let base64Data = Base64.encode(JSON.stringify(data));
 //設置簽名并進行md5加密
 let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
 //把數據再次進行加密
 postData.data = encodeURI(base64Data);
 postData.signature = signature;
 return postData
}

上述就是小編為大家分享的怎么在Vue中利用axios攔截請求了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享標題：怎么在Vue中利用axios攔截請求-創(chuàng)新互聯(lián)
本文URL：http://jinyejixie.com/article44/coedhe.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網站制作、軟件開發(fā)、網站設計公司、靜態(tài)網站、面包屑導航

廣告

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