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();
    // ... 其他配置
  }
);

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