​ 在实习中遇到了message组件重复弹出的问题。当一个页面请求多个接口时，message放在响应拦截器里，如果多个接口返回异常或者错误时，message组件会多次弹出。

这里对element-ui 的message组件做一层封装，防止此类问题出现

src/utils/resetMessage.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**重置message，防止重复点击重复弹出message弹框 */
import {
  Message
} from 'element-ui';

let messageInstance = null;
const resetMessage = (options) => {
  if (messageInstance) {
      messageInstance.close()
  }
  messageInstance = Message(options)
};
['error', 'success', 'info', 'warning'].forEach(type => {
  resetMessage[type] = options => {
      if (typeof options === 'string') {
          options = {
              message: options
          }
      }
      options.type = type
      return resetMessage(options)
  }
})

export const message = resetMessage

调用：

1
2
3
4
5
6
7
8
import { message } from "@/utils/resetMessage"

 message({
        message: error.response.data.message,
        type: "error",
        duration: 5 * 1000,
        showClose: true
});