使用elementui请求多个接口重复弹窗报错

在项目开发过程中，经常遇到同时请求多个接口，其中有几个接口需要弹出错误信息，就像下图这样，导致几个错误信息重叠在一起。

对于这种情况，我们不想他们重叠展示，是否可以每次就只展示一个错误呢？带着这个疑问，我们开始编码。

import { Message } from 'element-ui'

let messageUse = null
const messageToast = (options) => {
  if (messageUse) {
    messageUse.close()
  }
  messageUse = Message(options)
}

export default messageToast

我们可以新建一个变量messageUse，用来记录是否有弹出信息提示，有的话我们关闭上一个弹出信息，弹出最新的消息提示，这样我们就可以每次只显示一个弹出信息了，赶紧来调用试试吧。

import messageToast from './message'

messageToast({ message: '我是错误信息一', type: 'error'})
messageToast({ message: '我是错误信息二', type: 'error'})
messageToast({ message: '我是错误信息三', type: 'error'})

代码执行，页面弹出信息如下图，这样，我们就实现了每次只弹出最后那一个错误信息了。

任务就这样结束了吗？并没有！我们在使用错误信息提示组件的时候，通常只需要this.$message.error('我是错误信息')，那我们封装的messageToast如何也能这样简洁的弹出提示信息呢？带着这个疑问，我们继续编码。

import { Message } from 'element-ui'

let messageUse = null
const messageToast = (options) => {
  if (messageUse) {
    messageUse.close()
  }
  messageUse = Message(options)
}

// 为messageToast添加四个提示框类型，判断传入的数据是否为字符串，是的话则可以判断为一段文本，我们直接修改options对象的message属性
['success', 'error', 'info', 'warning'].forEach(item => {
  messageToast[item] = options => {
    if (typeof options === 'string') {
      options = {
        message: options
      }
    }
    options.type = item
    return messageToast(options)
  }
})

export default messageToast

这样我们就算大功告成了，在项目中就可以可以使用messageTost.error('我是错误信息')来快捷的弹出信息了。