老项目后台管理,要在每个页面请求的时候都添加一个loading,为了统一和防止一个页面多次请求页面出现闪烁的情况同意在request.js中添加了一个全局loading。
想要的效果:
1.在请求的时候创建一个loading样式,请求结束是关闭。
2.loading出现后设置一个最短时间,防止请求立马响应回来,页面闪烁一下。多个请求时不添加多个loading效果。
//引入loading
import { Loading } from "element-ui";
//引入公共方法(防抖函数)
import { common } from "@/assets/js/common";
// 全局loading相关代码
let loading; //定义loading变量
//创建loading
function startLoading() {
loading = Loading.service({
lock: true,
text: "拼命加载中",
spinner: "el-icon-loading",
});
// loading最少显示时间(为了防止当请求立马响应页面会闪一下的情况)
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 300);
});
}
//清除loading
async function endLoading() {
await startLoading();
loading.close();
}
//记录当前需要显示加载动画的请求数量
let needLoadingRequestCount = 0;
//使用防抖函数防止重复创建和清理loading的问题
const showFullScreenLoading = common.debounce(() => {
if (needLoadingRequestCount === 0) {
startLoading();
}
needLoadingRequestCount++;
}, 400);
const tryHideFullScreenLoading = common.debounce(() => {
// if (needLoadingRequestCount <= 0) return;
needLoadingRequestCount--;
if (needLoadingRequestCount === 0) {
endLoading();
}
}, 400);
// 请求拦截
request.interceptors.request.use(
(config) => {
// ... 其他配置
showFullScreenLoading();
return config;
},
(error) => {
// ... 其他配置
showFullScreenLoading();
return Promise.reject(error);
}
);
// 响应拦截
request.interceptors.response.use(
(res) => {
tryHideFullScreenLoading();
// ... 其他配置
return res;
},
(err) => {
tryHideFullScreenLoading();
// ... 其他配置
}
);
大概就这这么写的,当然最重要的还是根据自己的项目需求来做适当的改变。