很多时候我们能够看到类似进度条一样的东西在页面顶部进行加载，代表页面是否加载完成，或者其他的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 {
// 处理错误
}
});