封装elementUI Message 组件, 避免连续多个请求接口报错，页面同时连续显示多个message弹窗

蓝with黑

已于 2023-03-02 11:29:36 修改

阅读量915

点赞数

分类专栏： bug解决记录文章标签： elementui javascript 前端

于 2022-10-27 14:56:35 首次发布

本文链接：https://blog.csdn.net/qq_24380731/article/details/127552645

版权

bug解决记录专栏收录该内容

11 篇文章 0 订阅

订阅专栏

项目中如果打开页面请求一连串接口，当后端出问题时，会连续报错，此时，页面上会出现很多message的错误提示。本文是对该问题进行优化，封装了elementUI Message 组件, 避免连续多个请求接口报错，页面同时连续显示多个message弹窗。

封装代码如下：


/**重置message，防止重复点击重复弹出message弹框 */
import { Message } from 'element-ui';
 
let messageInstance = null;
const norepeatMessage = (options) => {
    if(messageInstance) {
        messageInstance.close()
    }
    messageInstance = Message(options)
};
['error','success','info','warning'].forEach(type => {
    norepeatMessage[type] = options => {
        if(typeof options === 'string') {
            options = {
                message:options
            }
        }
        options.type = type
        return norepeatMessage(options)
    }
})
let messageup

export default  messageup = norepeatMessage

使用:在axios统一拦截中使用

	// import { Message } from 'element-ui'	
	import Message from '@bizComp/norepeatMessage'
	  Message({
            message: res.message || res.msg || 'Error',
            type: 'error',
            duration: 5 * 1000
          })