vue+element项目中页面多个接口异常，只提示一次异常信息-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+element项目中页面多个接口异常，只提示一次异常信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue+element项目中页面多个接口异常，只提示一次异常信息,vue.js,前端,javascript

有时候一个页面会同时调多个接口，但是多个接口异常，需要做提示，那么提示的时候会弹出很多的提示信息，这无疑让体验感降低很多。所以针对这种情况，我们配合element UI统一做一个异常状态的处理，只能显示一次提示的功能，后续代码调接口的时候

也可以省略去写异常状态下的逻辑了。
首先新建一个文件 messageOnce.js，内容如下：

import {Message} from 'element-ui'
// 私有属性，只在当前文件可用
const showMessage = Symbol('showMessage')
export default class domMessage {
    success (options, single = true) {
        this[showMessage]('success', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    [showMessage] (type, options, single) {
        if (single) {
            // 判断当前页是否有el-message标签，如果没有则执行弹窗操作
            if (document.getElementsByClassName('el-message').length === 0) {
                Message[type](options)
            }
        } else {
            Message[type](options)
        }
    }
}

第二步，需要在你的响应拦截器（interceptors.response.use）的页面去引入刚才的文件，我取名为domMessage，引入：import domMessage from './messageOnce'
第三步，new 对象实例 const messageOnce = new domMessage()
第四步，在响应拦截器中去写

if (response.data.code && JSON.parse(response.data.code) == 500) {
      messageOnce.warning({
        message: '系统异常'+response.data.msg,
        type: 'warning'
      })
}

然后尝试就行了。

vue+element项目中页面多个接口异常，只提示一次异常信息,vue.js,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-758877.html