解决Message多次弹窗问题

82 阅读1分钟

一般系统框架会在请求响应器中统一处理错误请求,用Message提示错误信息,单一个页面同时发送多条请求,单遇到服务器问题或者权限问题,会在同一时间提示多条错误,造成不好的用户体验。

处理方式

  • 一般遇到权限问题会跳转到登录页,在路由守卫中处理 到登录页前清除所有弹窗实例
  • 封装一个message单例,当业务代码调用时,判断是否已存在相同提示信息的message, 如果已经存在则不提示了。
import { Message as ArcoMessage } from '@arco-design/web-vue'
import { isFunction, isString } from 'lodash-es'

let MessageMap = new Map()
export const message = {
  clear: () => ArcoMessage.clear(),
}
const messageKeys = ['info', 'success', 'warning', 'error', 'loading', 'normal']
messageKeys.forEach((key) => {
  message[key] = (config) => {
    const mapKey = isString(config) ? `${key}/${config}` : `${key}/${config.content}`
    if (MessageMap.has(mapKey)) return void 0
    const onClose = () => {
      isFunction(config.onClose) && config.onClose()
      MessageMap.delete(mapKey)
    }
    const _config = isString(config) ? { content: config, onClose } : { ...config, onClose }
    const instance = ArcoMessage[key](_config)
    MessageMap.set(mapKey, instance)
  }
})