當在開發(fā)過程中進入頁面請求多個接口挣菲，多條信息吐絲的現(xiàn)象

QQ截圖20200827205943.png

感覺就是很不得勁兒，眼花撩亂的常空！

以element-ui做示范

建一個msgStore.js文件

import { Message } from "element-ui";

class StorageApi {
  static errorList = []; // 獲取所有的消息 進行存儲
  static Iserr = false; // 狀態(tài)判斷顯示消息窗口

  // 消息處理
  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",
                "服務器沒返回乍狐，請與管理員聯(lián)系"
              );