一般系统框架会在请求响应器中统一处理错误请求,用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)
}
})