CancelToken與interceptors實現請求取消

1、開發過程當中，常常會碰到這樣的業務場景：
屢次觸發查詢按鈕時，取消其餘查詢請求，只保留最後一個。若是涉及到圖表展現的，邏輯會稍須要一些處理，好比點擊查詢，顯示loading，請求回來後，有數據則展現數據，無數據或者返回錯誤信息則顯示未查到相關數據。

2、vue項目的實現方式

1. 取消請求

if (this.cancelRequest){
    this.cancelRequest()      //取消前一個請求
}
let CancelToken = axios.CancelToken    
this.$axios({
    method: 'post',
    url: '/login/login',
    params: obj,
    cancelToken: new CancelToken((c)=>{
       this.cancelRequest = c    //保存當前請求
    })
}).then((res)=>{
    if(!res)return;       //若是res被攔截，則不處理
    //業務邏輯
}).catch((res)=>{
    this.loading = false
})

二、區分請求返回的錯誤信息，若是是取消請求致使的，則一直處於loading狀態，若是返回錯誤信息，則關閉loading,顯示未查到相關數據。
怎麼區分錯誤信息呢，axios有一個方法isCalcel能夠判斷是否是由取消請求致使的錯誤信息。
代碼以下：

axios.interceptors.reaponse.use((res)=>{
   //請求攔截的代碼
},(err)=>{
    if(!axios.isCancel(err) {  //只攔截取消請求致使的錯誤信息
        return err             //這裏若是沒有return,響應回調函數裏的res爲undefined
    })
})