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 {
    // 处理错误
  }
});