// 配置axios拦截器
import axios from ‘axios‘;
import store from ‘../store‘; // 追加token
import {Bus} from "../service/bus";
// import router from ‘../router‘ // 路由跳转
// 创建axios实例
const clearTimeoutByUrl = (url, requestList) => {
for (let item in requestList) {
if (url === requestList[item][‘url‘]) {
clearTimeout(requestList[item][‘timeId‘]);
}
}
}
const service = axios.create({
// baseURL: process.env.VUE_APP_URL, // 接口可能会分模块调用 所以不做全局配置
timeout: 50000 // 请求超时时间
});
// request拦截器,在请求之前做一些处理
service._requestCount = 0; // 累加请求次数
service._requestTimeIdList = [];
service.interceptors.request.use(
config => {
service._requestCount++;
// 如果接口请求小于200ms的话 那么就不显示loading
const timeId = setTimeout(() => {
store.commit(‘handleLoading‘, true);// 显示loading
}, 200);
service._requestTimeIdList.push({
timeId: timeId,
url: config.url
});
return config
},
error => {
Promise.reject(error)
}
)
// response 拦截器,数据返回后进行一些处理
service.interceptors.response.use(
response => {
service._requestCount--;
// clear 200ms 后准备展示的loading
clearTimeoutByUrl(response.config.url, service._requestTimeIdList);
if (service._requestCount <= 0) {
store.commit(‘handleLoading‘, false);
}
const res = response.data;
return res;
},
(error) => {
service._requestCount--;
clearTimeoutByUrl(error.config.url, service._requestTimeIdList);
if (service._requestCount <= 0) { // 当全部的接口请求完毕后 关闭loading
store.commit(‘handleLoading‘, false);// 隐藏loading
}
Bus.showDefaultToast({
showClose: true,
message: ‘请求出错! 请稍后重试!‘,
type: ‘error‘,
duration: 0
})
Promise.reject(‘异常‘, error);
}
)
export default service
axios 配置拦截器 并且接口请求小于200ms的 不显示loading
原文:https://www.cnblogs.com/MainActivity/p/12107071.html