老项目后台管理，要在每个页面请求的时候都添加一个loading，为了统一和防止一个页面多次请求页面出现闪烁的情况同意在request.js中添加了一个全局loading。
想要的效果：
1.在请求的时候创建一个loading样式，请求结束是关闭。
2.loading出现后设置一个最短时间，防止请求立马响应回来，页面闪烁一下。多个请求时不添加多个loading效果。
//引入loadingimport { Loading } from "element-ui";//引入公共方法（防抖函数）import { common } from "@/assets/js/common";// 全局loading相关代码let loading; //定义loading变量//创建loadingfunction startLoading() {loading = Loading.service({lock: true,text: "拼命加载中",spinner: "el-icon-loading",});// loading最少显示时间（为了防止当请求立马响应页面会闪一下的情况）return new Promise((resolve) => {setTimeout(() => {resolve();}, 300);});}//清除loadingasync 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();// ... 其他配置});
大概就这这么写的，当然最重要的还是根据自己的项目需求来做适当的改变。
