解决在axios网络请求里错误频繁弹出elementui message的情况

如题，当然这个也可以平常使用，主要是修改messageBox的这种情况，我们先来说axios里的情况

首先我们先封装一个组件，在组件的目录层级下，新建一个resetMessage.js

**重置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

简单讲解下，实现逻辑就是如果在触发这个组件的时候回去检测上一个message实例是否还存在，还存在的话就关闭上一个message实例 然后重新创建，这样的话就能够有效的避免突然刷刷刷一堆提醒的问题

2.接下去在封装好的axios里面引入

import axios from "axios";

import { message } from "./resetMessage";
import { MessageBox } from "element-ui";
import Router from "../router/index";

const serves = axios.create({
  baseURL: process.env.BASE_API,
 
  timeout: 10000,
});

// 设置请求发送之前的拦截器
serves.interceptors.request.use(
  (config) => {
    // 可以动态设置后台地址
    const serverUrl = JSON.parse(localStorage.getItem("serverUrl")) || "";

    // 判断是不是admin登录
    
    if (serverUrl) {
      config.url = serverUrl + config.url;
    }
 

    // 设置请求头
    const tokenInfo = JSON.parse(localStorage.getItem("tokenInfo")) || "";
    if (!tokenInfo) {
      config.headers["token"] = "";
     
    } else {
      // config.headers["token"] = "";
      const token = tokenInfo.tokenName + "=" + tokenInfo.tokenValue;

      config.headers["token"] = token;
    }
    return config;
  },
  (err) => Promise.reject(err)
);

// 设置请求接受拦截器
serves.interceptors.response.use(
  (res) => {
    // 成功的请求
    if (res.status === 200) {
      if (res.data) {
        // 只返回data里的数据
        if (res.data.header.rspcode == "-2") {
          MessageBox.alert("登陆过期", "提示", {
            confirmButtonText: "登录",
            type: "warning",
          }).then(() => {
            Router.push("/login");
            // need do something
            // location.reload()
          });
        } else {
          
          return res.data;
        }
      }
    } else {
      // 请求失败
      console.log("errrrrrr");
      message.error(res.data.header.message);
      return res;
    }
  },
  (err) => {
    if (err.message === "Network Error") {
      

      MessageBox.alert("网络异常，请稍后重试", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      });
    } else if (err.message === "timeout of 10000ms exceeded") {
      message.error("网络响应超时，请检查网络或者请求参数是否正确");
    } else {
      message.error(err);
    }

    console.log("err:", err);

    return Promise.reject(err);
  }
);

// 将serves抛出去
export default serves;

这里是我封装的request的组件，里面用了elementui里的MessageBox和刚刚上文讲的message
用MessageBox主要是会有一个交互，如果登陆过期了就弹个可以确认的框，确认后就前往首页

自己封装的message主要是一个提醒 无交互，封装后防止频繁弹出

P.s. elementui里的MessageBox还是会有频繁弹出的问题 网上找了好像也没有很好的解决方案，多数都是说message的 然后如果要平时使用不是在axios里使用的话就可以在main.js里引入挂载即可

import resetMessage from "@/utils/resetMessage.js";
Vue.prototype.$resetMessage = resetMessage;

最后的最后，看到这里觉得有用可以点个赞～ 也欢迎大家互相讨论