vue+element-ui给全局请求设置一个loading样式

 老项目后台管理，要在每个页面请求的时候都添加一个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();// ... 其他配置}
);

大概就这这么写的，当然最重要的还是根据自己的项目需求来做适当的改变。