取消重複請求，只讓最後一次請求經過

axios 請求攔截 取消重複請求（屢次重複異步，結束pending狀態）

前端開發中，會涉及不少異步事件處理，頁面展現的處理關係最密切的就是loading圖層，可是loading交互在一些時候會不太友好，後端同窗也不喜歡loading狀態（後端同窗：這不就是說個人接口返回慢嘛？個人鍋！）
前端函數節流防抖也是一個解決方法，可是又有一個問題是，咱們處理的是異步，只要有異步就會有等待，好比，防抖時間是1s，異步事件觸發了兩次，就須要最快2s完成，假設第一次異步3s返回，第二次異步0.5秒返回；那出現的狀況就是，第一次觸發的3s異步，1s內沒有返回，1s後第二次觸發異步，第一次的異步尚未返回，第二次的異步就就開始了，0.5秒後第二次異步返回了，可是最終結果響應的是第一次的異步。

解決方案：利用axios能夠很方便的取消重複請求的pending狀態，結束重複請求，只讓最後一次請求經過

官方文檔： http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88

let pending = []; //聲明一個數組用於存儲每一個請求的取消函數和axios標識
let cancelToken = axios.CancelToken;
let removePending = (config) => {
    console.log('pending',pending);
    for(let p in pending){
        if(pending[p].u === config.url.split('?')[0] + '&' + config.method) { 
        //噹噹前請求在數組中存在時執行函數體
            pending[p].f(); //執行取消操做
            pending.splice(p, 1); //數組移除當前請求
        }
    }
}
//請求攔截
service.interceptors.request.use(function(config) { 
    /*.....*/
  removePending(config); //在一個axios發送前執行一下取消操做
  config.cancelToken = new cancelToken((c)=>{
        // pending存放每一次請求的標識，通常是url + 參數名 + 請求方法，固然你能夠本身定義
    pending.push({ u: config.url.split('?')[0] +'&' + config.method, f: c});//config.data爲請求參數
  });
   /*.....*/

})