如何解决element-ui 同时显示多个message错误提示问题

最近笔者在开发中遇到一个问题，在使用element-ui库的过程中，使用axios请求成功后会通过message来显示提示信息，在正常登录情况下如果单个接口成功或失败会显示对应的信息，但是如果在示登录的情况下，打开某一个页面，如果有同时请求多个接口的话，那么此时接口可能都会报未登录，错误信息也就会显示多个，会给用户带来不友好的体验。

如何解决这个问题呢，笔者有一个最简单的方法，因为element-ui的message方法一般会有一个延时，在一定的延时后才会显示，我们可以在axios的返回拦截器里面做处理，比如判断页面没有【el-message el-message--error】 这个class，如果没有就显示错误提示，也就意味着如果上一个错误提示还没消失，那么下一个提示就不会显示，这样就保证了只显示一个提示，不会重复显示多个提示了。

以下代码供参考：

if（!document.querySelector(".el-message.el-message--error")）{
　　　　this.$message.error("提示失败")
}

本文章由javascript技术分享原创和收集