Vue3+Axios+Element-Plus实现全局loading效果

1. utils/loading.js

/**
 * 全局loading效果：合并多次loading请求，避免重复请求
 * 当调⽤⼀次showLoading，则次数+1；当次数为0时，则显⽰loading
 * 当调⽤⼀次hideLoading，则次数-1; 当次数为0时，则结束loading
 */
import { ElLoading } from "element-plus";
// 定义⼀个请求次数的变量，⽤来记录当前页⾯总共请求的次数
let loadingRequestCount = 0;
// 初始化loading
let loadingInstance;
// 显⽰loading的函数并且记录请求次数 ++
const showLoading = () => {
  if (loadingRequestCount === 0) {
    // 全局实现loading效果，不⽤每个页⾯单独去v-loading
    // loading样式
    loadingInstance = ElLoading.service({
      lock: true,
      text: "加载中……",
      background: 'rgba(0, 0, 0, 0.1)'
    });
  }
  loadingRequestCount++;
};
// 隐藏loading的函数，并且记录请求次数 --
const hideLoading = () => {
  if (loadingRequestCount <= 0) return;
  loadingRequestCount--;
  if (loadingRequestCount === 0) {
    loadingInstance.close();
  }
};
export { showLoading, hideLoading };

2. utils/request.js //封装的axios请求文件

import axios from "axios";
//loading
import { showLoading, hideLoading } from "../utils/loading";
 
let baseURL = "";
if (process.env.NODE_ENV === "production") {
  //根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境
  if (process.env.VUE_APP_TITLE === "production") {
    //production 生产环境
    baseURL = "xxxxxxxxxxxxxxxxxxx";
  } else {
    //test 测试环境
    baseURL = "xxxxxxxxxxxxxxxxxxx";
  }
} else {
  //development 开发环境
  baseURL = "xxxxxxxxxxxxxxxxxxxx";
}
axios.defaults.baseURL = baseURL;
axios.defaults.timeout = 20000;
// 携带 cookie，对目前的项目没有什么作用，因为是 token 鉴权
axios.defaults.withCredentials = true;
// 请求头，headers 信息
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["Access-token"] = "";
// 默认 post 请求，使用 application/json 形式
axios.defaults.headers.post["Content-Type"] = "application/json";
 
// 请求拦截器
axios.interceptors.request.use(
  (config) => {
// 请求拦截进来调⽤显⽰loading效果
 
    showLoading();
    config.headers["Access-token"] =
      window.sessionStorage.getItem("token") == null
        ? ""
        : window.sessionStorage.getItem("token");
    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject();
  }
);
// 响应拦截器
axios.interceptors.response.use(
  (response) => {
// 响应拦截进来隐藏loading效果，此处采⽤延时处理是合并loading请求效果，避免多次请求loading关闭⼜开启
    setTimeout(() => {
      hideLoading();
    }, 200);
    if (response.status === 200) {
      if (response.data.code == 4001) {
        window.location.href = "/login";
        window.sessionStorage.clear();
      }
      return response.data;
    } else {
      Promise.reject();
    }
  },
  (error) => {
// 响应拦截进来隐藏loading效果，此处采⽤延时处理是合并loading请求效果，避免多次请求loading关闭⼜开启
 
    setTimeout(() => {
      hideLoading();
    }, 200);
    console.log(error);
    return Promise.reject();
  }
);
 
export default axios;