前端页面为了更加迎合用户的需求,带来很好的用户体验。但有的时候,获取数据量太大的话,页面没有任何提示,用户体验不是很好。所以这里我用到这个Element UI其中的模块,完善了一下用户交互效果。
首先,创建一个 Loading.js 文件用来存储 Element UI 的 Loading 配置.
代码如下:
import { Loading } from 'element-ui';
let loadingCount = 0;
let loading;
const startLoading = () => {
loading = Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(255, 255, 255, 0.7)',
target: document.querySelector('#table')
});
};
const endLoading = () => {
loading.close();
};
export const showLoading = () => {
if (loadingCount === 0) {
startLoading();
}
loadingCount += 1;
};
export const hideLoading = () => {
if (loadingCount <= 0) {
return;
}
loadingCount -= 1;
if (loadingCount === 0) {
endLoading();
}
};
配置完成之后,找到 Axios 请求的配置文件添加以下代码,用于发送 Axios 即可调用 Loading 方法
import axios from 'axios'
import { showLoading, hideLoading } from './loading';
const service = axios.create({
baseURL: Ip地址+端口号
// 所有方法的超时时间都设置为2秒
timeout: 2000 // request timeout
})
// 拦截器拦截axios请求显示加载页面
service.interceptors.request.use((req) => {
if (req.url.indexOf('/bim-yasha/') == -1) {
showLoading();
}
return req;
}, err => Promise.reject(err));
/* 请求之后的操作 */
service.interceptors.response.use((res) => {
if (res.config.url.indexOf('/bim-yasha/') == -1) {
hideLoading();
}
return res;
}, (err) => {
hideLoading();
return Promise.reject(err);
});