重写message的error方法，解决所有接口同时重复报错问题

image.png

当网络异常，或token问题时，有时页面存在多个接口同时请求，这时候所有接口都会报错，页面弹出很多message，将message的error方法重写，可解决

1、创建messageOverride.js文件 放在目录src/config下

image.png

import Vue from 'vue'

export default function overrideMessageError() {
  // 保存原始的 $message.error 方法
  const originalMessageError = Vue.prototype.$message.error
  let isErrorMessageVisible = false
  let errorMessageTimeout = null
  // 定义新的 $message.error 方法
  Vue.prototype.$message.error = function customMessageError(message) {
    if (!isErrorMessageVisible) {
      // 标记错误消息正在显示
      isErrorMessageVisible = true
      // 调用原始的 $message.error 方法显示消息
      originalMessageError.call(this, message)
      // 设置定时器，在指定时间后允许再次显示错误消息
      clearTimeout(errorMessageTimeout) // 确保如果有快速连续的错误，旧的计时器被清除
      errorMessageTimeout = setTimeout(() => {
        isErrorMessageVisible = false
      }, 2000) // 2秒后允许再次显示错误消息
    }
  }
}

2、在main.js中引用该文件，替换默认

import GLOBALCONFIG from './config/global'
import Directives from '@/directives'
import Moment from 'moment'
import overrideMessageError from './config/messageOverride' // 导入重写的message error方法
require('./http-interceptor')
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(Directives)
// 执行重写逻辑
overrideMessageError()
Vue.prototype.$axios = axios
Vue.prototype.$GLOBALCONFIG = GLOBALCONFIG
Vue.prototype.moment = Moment
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

image.png