共计 1765 个字符,预计需要花费 5 分钟才能阅读完成。
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
}
2、在 api
import request from '@/request'
export function getExportApi (params) {
return request(
'','',
{loading: true}
)({
url: 'xxx,
method: 'get',
params,
responseType: 'blob'
})
}
正文完