关于vue\react使用element\antd整合message消息提示

当在开发过程中进入页面请求多个接口，多条信息吐丝的现象

QQ截图20200827205943.png

感觉就是很不得劲儿，眼花撩乱的！

以element-ui做示范

建一个msgStore.js文件

import { Message } from "element-ui";

class StorageApi {
  static errorList = []; // 获取所有的消息 进行存储
  static Iserr = false; // 状态判断显示消息窗口

  // 消息处理
  static setErrorMessage(statusName, contentMsg) {
    let _this = this;
    if (!_this.errorList[statusName]) {
      _this.errorList[statusName] = new Array();
    }
    _this.errorList[statusName].push(contentMsg);
   setTimeout(function() {
      let error= SessionStorageApi.getErrorMessage();
      if (error) {
        if (!_this.Iserr) {
          _this.Iserr = true;
          Message({
            dangerouslyUseHTMLString: true,
            message: error,
            type: "error",
            duration: 5 * 1000,
            onClose: (instance: any) => {
              _this.Iserr = false;
              SessionStorageApi.removeErrorMessage();
            },
          });
        }
      }
    }, 1000);
  }
// 进行样式排版
  static getErrorMessage() {
    if (this.errorList && Object.keys(this.errorList).length > 0) {
      let contentMsg = "";
      for (let i in this.errorList) {
        if (i == "500") {
          for (let e of this.errorList[i]) {
            contentMsg += e + "<br/>";
          }
        } else if (i == "404") {
          contentMsg = this.errorList[i][0] + "<br/>";
        } else {
          contentMsg += this.errorList[i][0] + "<br/>";
        }
      }
      return contentMsg;
    }
  }
  static removeErrorMessage() {
    this.errorList = [];
  }
}

export default StorageApi;

在需要进行message的地方进行引入

  import StorageApi from "@/api/StorageApi.ts";
 // 需要做提示信息的地方
  StorageApi.setErrorMessage(
                "error",
                "服务器没返回，请与管理员联系"
              );