axios構建請求池處理全局loading狀態&&axios避免重復請求

很多時候我們能夠看到類似進度條一樣的東西在頁面頂部進行加載，代表頁面是否加載完成，或者其他的loading效果，我們當然不可能通過promise.all來講所有的請求合並到一起然后進行處理，這個時候我們可以通過一個計數器，然后監聽axios的請求發送來進行處理

//定義計時器
let loadCount = 0;


// 請求前
http.interceptors.request.use(
  config => {
    loadCount++;
    // LoadingBar.start()
    // loading加載
    return config
  },
  err => {
    return Promise.reject(err)
  }
)
//請求后
http.interceptors.response.use(
  res => {
    loadCount--
    if (!loadCount) {
      //LoadingBar.end();
      //結束loading
    }
    return res;
  },
  err => {
    loadCount--;
    if (!loadCount) {
      //LoadingBar.end();
      //結束loading
    }
    return Promise.reject(err);
  }
)

 在一些特殊的需求里面，我們可能會重復的進行請求，比如即時搜索，雖然有時候可以通過節流的方式處理一下， 但是難免會遇到第一次請求比第二次請求晚返回的情況，導致呈現的數據不准確，所以我們可以通過中斷請求來防止此類情況發生

// 請求前
http.interceptors.request.use(
  config => {
    if(config.cancelToken && config.cancelObj && config.cancelObj.cancel) {
        config.cancelObj.cancel('中斷請求');
        delete config.cancelObj;
    }
    return config;
  },
  err => {
    return Promise.reject(err)
  }
);

//使用
  //工廠方法創建CancelToken
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token,
  cancelObj: source
}).catch(function(err) {
  if (axios.isCancel(err)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});