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

csstmg

已于 2023-06-13 11:10:50 修改

阅读量1.3k

点赞数 3

文章标签：前端 vue.js javascript

于 2023-06-13 11:05:21 首次发布

本文链接：https://blog.csdn.net/csstmg/article/details/131184233

版权

该代码段展示了如何使用ElementUI的Message组件封装错误提示函数，并在axios的响应拦截器中应用。当接收到错误响应时，函数会避免重复显示错误信息，并在错误消息关闭后从队列中移除。此外，对于特定错误码，如401，会显示错误消息并可能跳转至登录页面。

摘要由CSDN通过智能技术生成

// 在需要使用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)
    }