前端 vue中axios拦截错误信息一下会有很多报错信息,封装下Message让错误信息只出现一次

// 在需要使用Message的地方导入
import { Message } from 'element-ui'

// 创建一个错误信息的队列,用于保存已经显示的错误信息
const errorQueue = []

// 封装的函数用于显示错误信息
const showMessage = (message, type = 'error', duration = 3000) => {
  // 检查错误信息是否已经显示过,如果已经显示则直接返回,避免重复显示
  if (errorQueue.includes(message)) {
    return
  }

  // 添加错误信息到队列
  errorQueue.push(message)

  // 使用Element UI的Message组件显示错误信息
  Message({
    message,
    type,
    duration,
    onClose: () => {
      // 错误信息显示完毕后,从队列中移除
      const index = errorQueue.indexOf(message)
      if (index > -1) {
        errorQueue.splice(index, 1)
      }
    }
  })
}

// 导出封装好的函数,供拦截器中使用
export default showMessage

使用

// 导入封装的函数
import showMessage from './showMessage'

// 在axios的拦截器中使用封装的函数显示错误信息
axios.interceptors.response.use(
  response => {
    // 处理响应数据
    return response
  },
  error => {
    // 处理响应错误
    showMessage(error.message) // 显示错误信息
    return Promise.reject(error)
  }
)
  • 部分情况也可以加锁dialogFlag
dialogFlag:true
if ([401,410].includes(response.data.code)) {
      // 用户信息已过期 或者用户已离职
      if (response.data.code !== 401 && dialogFlag) {
        dialogFlag = false
        Message({
          type: 'error',
          message: response.data.message || response.data.msg || response.msg
        })
      }
      removeToken()
      if (其他判断) {
        window.location.href = URL + '#/login?backUrl=' + escape(window.location.href)
      }
      setTimeout(() => {
        dialogFlag = true
      }, 1000)
    } 

你可能感兴趣的:(前端,vue.js,javascript)