ElementUI 避免出现多个message同时出现

前端封装axios的时候，通常统一用 Element 的 Message 展示服务器返回的错误或者统一报错信息。由于网络问题或者服务器配置问题，可能某个页面调用多个接口的时候，会同时间出现多条报错信息，这样对用户的体验很不好。所以需要封装一个 message ，使得页面同时间只会出现一个信息框。

// reset-message.js
import { Message } from 'element-ui'

// 避免出现多个报错信息弹窗
let messageInstance = null
const resetMessage = (options) => {
  if (messageInstance) {
    // 先把第一条信息关闭，在弹出第二条信息
    messageInstance.close()
  }
  messageInstance = Message(options)
}

// 重新定义 message.success 等 4个方法
['error', 'success', 'info', 'warning'].forEach(type => {
  resetMessage[type] = options => {
    options = {
      type: type,
      message: options
    }
    return resetMessage(options)
  }
})

export const message = resetMessage

// main.js
import Vue from 'vue'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { message } from './utils/reset-message' // reset message

Vue.use(ElementUI)
// 必须在这行命令后，覆盖 $message 方法
Vue.prototype.$message = message

// request.js 封装axios
import { message } from '@/utils/reset-message' // reset message

service.interceptors.response.use(
	// ..... if error
  message({
    message: res.rmsg || ErrorText,
    type: 'error',
    duration: 2 * 1000
  })
)