Vue3 + Axios + Element-Plus 实现全局的合并请求loading

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 = (target) => {
    if (loadingRequestCount === 0) {
        // element的服务方式 target 我这边取的是表格class
        // 类似整个表格loading和在表格配置v-loading一样的效果，这么做是全局实现了，不用每个页面单独去v-loading
        loadingInstance = ElLoading.service({ target });
    }
    loadingRequestCount++
}

// 编写一个隐藏loading的函数，并且记录请求次数 --
const hideLoading = () => {
    if (loadingRequestCount <= 0) return
    loadingRequestCount--
    if (loadingRequestCount === 0) {
        loadingInstance.close();
    }
 }

 export {
    showLoading,
    hideLoading
 }

axios/axios.js

import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getToken } from '@/utils/auth'
import { showLoading, hideLoading } from '@/utils/loading'

// 配置环境
const isProd = process.env.NODE_ENV === 'production'
const options = {
  baseURL: isProd ? '/xxx' : '/xxx'
}
const instance = axios.create(options)

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 请求拦截进来调用显示loading效果
  showLoading()

  // 断网提示
  if (!navigator.onLine) {
    ElMessageBox.alert(
      '您的网络故障，请检查!',
      '温馨提示',
      {
        confirmButtonText: '好的',
        type: 'warning'
      }
    )
  }

  // 判断是否存在token，如果存在将每个页面header都添加token
  if (getToken()) {
    config.headers.Authorization = getToken()
  }
  return config
}, error => {
  console.log('请求拦截error', error)
  // 对请求错误做些什么
  return Promise.reject(error)
})

// http response 拦截器
instance.interceptors.response.use(response => {
  // 响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启
  setTimeout(() => {
    hideLoading()
  }, 200)
  // ...对状态码进行拦截判断
  if (errcode === 0) {
    return response.data
  } else if (errcode === xxx) {
    ElMessageBox.alert(
      '你已被登出，需要重新登录',
      '温馨提示',
      {
        confirmButtonText: '重新登录',
        type: 'warning',
        showClose: false
      }
    ).then(() => {
      removeCookie()
      // 为了重新实例化vue-router对象 避免bug
      location.reload()
    })
  } else {
    ElMessage.error(errmsg)
    return Promise.reject(response.data)
  }
}, error => {
  // 响应拦截进来隐藏loading效果，此处采用延时处理是合并loading请求效果，避免多次请求loading关闭又开启
  setTimeout(() => {
    hideLoading()
  }, 200)
  console.log('http response - err', error)
  ElMessage({
    message: '服务器异常，请稍后再试',
    type: 'error',
    duration: 5 * 1000
  })
  return Promise.reject(new Error('error'))
})

export default instance