在Vue中如何使用axios請求攔截

_Dreams 發布于2019-08-23 12:31 / 1080人閱讀

摘要：很多初學者就會放棄使用攔截器，畢竟攔截器是可以不使用的，但是使用攔截器，會在頁面中減少很多不必要的代碼。三不使用請求攔截如果不使用請求攔截，也是可以的，但是會多了非常多的代碼，我們以登錄頁為例。

一、前言 axios的基礎使用就不過多的講解啦，如何使用可以看axios文檔使用說明·Axios中文說明 在這里和大家分享一下axios攔截在實際項目中的使用

很多人都看過axios的官方文檔中攔截器這一欄，有的人可能會有點懵，因為文檔只告訴你有這個東西，而不告訴你在什么情況下使用。很多初學者就會放棄使用axios攔截器，畢竟攔截器是可以不使用的，但是使用攔截器，會在頁面中減少很多不必要的代碼。

二、說在前面的 項目使用的ui框架是iview

以下友好提示均使用iview ui的message提示組件，例如this.$Message.xxx
/api/request 僅僅只是例子接口，實際開發用后臺提供的接口。
code是后臺狀態碼，我這里也只是例子，不要問我為毛我的返回碼和你的怎么不一樣這樣的問題哈...這些都需要和后臺溝通約定的。
使用的請求頭是：axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";至于為什么使用這個請求頭可以看看我的另外一篇文章關于axios會發送兩次請求，有個OPTIONS請求的問題
因為使用的是這個請求頭所以需要用qs模塊，不然后臺不認這個數據。

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

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

//雙向數據綁定獲取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
    //特殊錯誤處理，狀態為10時為登錄超時
    if(data.data.code === 10){
        this.$Message.error("登錄已超時，請重新登錄")
        this.$router.push("/login")
    //其余錯誤狀態處理    
    }else if(data.data.code != 0){
        this.$Message.error(data.data.msg)
    //請求成功
    }else if(data.data.code === 0){
        //進行成功業務邏輯
    }
    //.......
});

如果不使用請求攔截，那么對每一條請求每一個狀態都要特殊處理，如果請求特殊狀態有數十個，每個頁面有很多請求，那么頁面會變得很長很臃腫，不好維護。

三、使用請求攔截

相同的請求返回代碼我們可以抽取出來，寫在請求攔截中
當我們設置了攔截之后，在我們的組件代碼中可以簡化很多，還是以登錄界面為例：

在main.js中

//請求發送攔截，把數據發送給后臺之前做些什么......
axios.interceptors.request.use((request) => {

  //這個例子中data是loginName和password
  let REQUEST_DATA = request.data
  //統一進行qs模塊轉換
  request.data = qs.stringify(REQUEST_DATA)
  //再發送給后臺
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//請求返回攔截，把數據返回到頁面之前做些什么...
axios.interceptors.response.use((response) => {
  //特殊錯誤處理，狀態為10時為登錄超時
  if (response.data.code === 10) {
    iView.Message.error("登錄已超時，請重新登錄");
    router.push("/login")
  //其余錯誤狀態處理    
  } 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，如果請求的數據狀態code不為0,會被攔截，則data為undefined
    if(data){
        //進行請求返回成功邏輯
    }
});

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

四、其他

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

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

還是以這個登錄頁面為例

//雙向數據綁定獲取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

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

我們把httpRequest這個data信息數據發送給后臺之前，進行簽名，并加密數據
在main.js中，我們對發送的數據進行攔截

//請求發送攔截
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))
  //發送請求給后臺
  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
}

這樣我們就完成了對數據加密以及簽名，這樣再發送給后臺。

注意：這里只作為例子展示，如果需要用到簽名，如何簽名，是前臺和后臺溝通的結果!
axios請求攔截的用處遠遠不止這樣，具體如何使用，還需要在實際工作，實際項目中隨機應變啦。

如果對你有幫助請點贊收藏支持一下，有什么疑問歡迎留言，有錯誤歡迎大力指出

云服務器 GPU云服務器 webrtc如何在web中使用在php中如何使用n vue 中使用 webrtc vue中使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98653.html

后端開發者的Vue學習之路（五）

摘要：由服務器提供的響應來自服務器響應的狀態碼來自服務器響應的狀態信息服務器響應的頭是為請求提供的配置信息所以請求返回后，我們可以通過來獲取響應情況。攔截器攔截器攔截器用于攔截發起的請求或用于攔截返回的響應。目錄上節內容回顧使用第三方組件庫如何發起請求請求錯誤處理請求帶參 ...

jay_tian 2019-04-23 11:51 評論0 收藏0
Spring Boot + Vue 前后端分離開發，前端網絡請求封裝與配置

摘要：今天松哥就帶大家來看看的使用。此時啟動前端項目，就可以順利發送網絡請求了。松哥將自己封裝的網絡請求庫已經放在上，歡迎大家參考。前端網絡訪問，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，網絡訪問較多的采用 vue-resources，Vue2.0 之后，官方不再建議使用 vue-resources ，這個項目本身也停止維護，目前建議使用的方案是 axios。今天松哥就帶大...

Ku_Andrew 2019-05-23 11:48 評論0 收藏0
實戰Vue簡易項目（5）模擬數據

摘要：若需要傳參，傳第二個參數不接受多個參數的傳入，最多只接收兩個參數請求數據目前，通過以上步驟，我們獨立的構建了模擬數據和狀態管理，但還沒有將它們結合起來。驗證如果你想驗證寫出來的模擬數據是否正確，可以在示例頁打開控制臺，直接運行。關于模擬數據，這里使用Mock.js這個庫，關于用法，官網說的也比較詳細，這里我就簡單的帶一下。列表數據我們先將項目中src/components/Hel...

Magicer 2019-08-23 10:43 評論0 收藏0
vue封裝axios基本思路

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。在vue項目之中使用axios是一個非常明智的選擇，因為vue官方已經宣稱不再維護vue-resource,并且推薦使用axios. 1 為什么選擇axios？使用axios可以統一做請求-響應攔截，例如響應時我們將響應信息攔截起來，判斷狀態碼，從而彈出報錯信息設定請求超時,例如3000ms未響應...

microcosm1994 2019-08-26 12:10 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

rickchen 2019-08-22 18:29 評論0 收藏0