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 {
    // 處理錯誤
  }
});