做网站排名优化的公司,罗湖网站建设联系电话,wordpress 显示热度,使用php做的学校网站老项目后台管理#xff0c;要在每个页面请求的时候都添加一个loading#xff0c;为了统一和防止一个页面多次请求页面出现闪烁的情况同意在request.js中添加了一个全局loading。
想要的效果#xff1a;
1.在请求的时候创建一个loading样式#xff0c;请求结束是关闭。
2… 老项目后台管理要在每个页面请求的时候都添加一个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();// ... 其他配置}
);
大概就这这么写的当然最重要的还是根据自己的项目需求来做适当的改变。
