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