当在开发过程中进入页面请求多个接口，多条信息吐丝的现象
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 + "
";
}
} else if (i == "404") {
contentMsg = this.errorList[i][0] + "
";
} else {
contentMsg += this.errorList[i][0] + "
";
}
}
return contentMsg;
}
}
static removeErrorMessage() {
this.errorList = [];
}
}
export default StorageApi;
在需要进行message的地方进行引入
import StorageApi from "@/api/StorageApi.ts";
// 需要做提示信息的地方
StorageApi.setErrorMessage(
"error",
"服务器没返回，请与管理员联系"
);