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

1、前言

---

 

在這裏和你們分享一下axios攔截在實際項目中的使用 (轉載出處:  http://www.javashuo.com/article/p-shvziddp-cy.html )

不少人都看過axios的官方文檔中攔截器這一欄，有的人可能會有點懵，由於文檔只告訴你有這個東西，而不告訴你在什麼狀況下使用。不少初學者就會放棄使用axios攔截器，畢竟攔截器是能夠不使用的，可是使用攔截器，會在頁面中減小不少沒必要要的代碼。

2、說在前面的

---

 

項目使用的ui框架是iview

如下友好提示均使用iview ui的message提示組件，例如this.$Message.xxx
/api/request 僅僅只是例子接口，實際開發用後臺提供的接口。
code是後臺狀態碼，我這裏也只是例子，不要問我爲毛個人返回碼和你的怎麼不同這樣的問題哈...這些都須要和後臺溝通約定的。
使用的請求頭是：axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';至於爲何使用這個請求頭能夠看看個人另一篇文章關於axios會發送兩次請求，有個OPTIONS請求的問題
由於使用的是這個請求頭因此須要用qs模塊，否則後臺不認這個數據。

3、不使用請求攔截

---

 

若是不使用請求攔截，也是能夠的，可是會多了很是多的代碼，咱們以登陸頁爲例。

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

//雙向數據綁定獲取值
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){
        //進行成功業務邏輯
    }
    //.......
});

若是不使用請求攔截，那麼對每一條該請求的每個狀態都要特殊處理，若是請求特殊狀態有數十個，每一個頁面有不少請求，那麼頁面會變得很長很臃腫，很差維護。

3、使用請求攔截

---

 

相同的請求返回代碼咱們能夠抽取出來，寫在請求攔截中
當咱們設置了攔截以後，在咱們的組件代碼中能夠簡化不少，仍是以登陸界面爲例：

在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請求添加了攔截，能夠減小不少代碼邏輯，頁面可讀性更高，可維護性也更高

4、其餘

---

 

這就是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請求攔截的用處遠遠不止這樣，具體如何使用，還須要在實際工做，實際項目中隨機應變啦。