1、在request.js
import axios from 'axios';
import { Message,Loading } from 'element-ui';
import _ from 'lodash';
//loading对象
let loading;
//当前正在请求的数量
let needLoadingRequestCount = 0;
//显示loading
function showLoading(target) {
// 判断是因为关闭时加了抖动，此时loading对象可能还存在，但needLoadingRequestCount已经变成0.避免这种情况下会重新创建个loading
if (needLoadingRequestCount === 0 && !loading) {
loading = Loading.service({
lock: true,
text: "Loading...",
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
}
needLoadingRequestCount++;
}//隐藏loading
function hideLoading() {
needLoadingRequestCount--;
needLoadingRequestCount = Math.max(needLoadingRequestCount, 0);
// 取needLoadingRequestCount和0之间的最大值
if (needLoadingRequestCount === 0) {
//关闭loading
toHideLoading();
}
}//防抖：将 300ms 间隔内的关闭 loading 便合并为一次。防止连续请求时， loading闪烁的问题。
let toHideLoading = _.debounce(()=>{
loading.close();
loading = null;
}, 300);
export default (
appName ,
type,
{
needSuccessTip = false,
needErrorTip = true,
loading = false,
loadingText
} = {}
) => {
// 创建axios实例
let baseURL = appName ? `${window.urlConfig[appName]}` : ''
const service = axios.create({
withCredentials: true,
baseURL: process.env.BASE_URL, // api的base_url
timeout: `${window.urlConfig.apiTimeout}`,
headers: {
token: localStorage.getItem('token'),
'Content-Type': `application/${
type === 'form' ? 'x-www-form-urlencoded' : 'json'
};
charset=UTF-8`
}
})
//添加请求拦截器
service.interceptors.request.use(res=> {
if(loading){
showLoading();
}
return res;
},
(err) => {
if(loading){
hideLoading();
}
Message.error('请求超时!');
Promise.reject(error)
});
//响应拦截器
service.interceptors.response.use(
(res) => {
if(loading){
hideLoading();
}
return res;
},
error => {
if(loading){
hideLoading();
}
Message({
message: error.message,
type: 'error'
})
return Promise.reject(error);
}
)
return service
}【Element UI- Axios实现全局的loading自动显示】2、在api
import request from '@/request'
export function getExportApi (params) {
return request(
'',
'',
{
loading: true
}
)({
url: 'xxx,
method: 'get',
params,
responseType: 'blob'
})
}
