[JavaScript知识库]vue中接口报错信息多次提示问题

最近项目遇到问题——报错信息过多提示，如下图所示：

找了半天原因(从封装的请求拦截—封装的请求接口方法一层层找问题)，突然发现是使用Elementui中的message弹框问题，解决方法如下：

重写message

• 新建js文件(文件具体位置自己放，我放在assets/scripts下面)

  我的文件名是resetMessage.js

  
  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
  

• main.js中引入上面文件

  import { message } from '@/assets/scripts/resetMessage'
  Vue.prototype.$message = message;
  

使用

this.$message.error('具体信息内容');