The interface error message in vue prompts the problem multiple times

Recently, the project encountered a problem - too many error messages, as shown in the figure below:

After searching for the reason for a long time (from the encapsulated request interception - the encapsulated request interface method to find the problem layer by layer), I suddenly found that it was using the message bomb in Elementui box problem, the solution is as follows:

rewrite message

• Create a new js file (put the specific location of the file yourself, I put it assets/scriptsbelow)

  My file name is 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
  

• Import the above file into main.js

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

use

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