vue+element项目中页面多个接口异常,只提示一次异常信息

news/2024/12/22 13:21:26/

有时候一个页面会同时调多个接口,但是多个接口异常,需要做提示,那么提示的时候会弹出很多的提示信息,这无疑让体验感降低很多。  所以针对这种情况,我们配合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'})
}

然后尝试就行了。


http://www.ppmy.cn/news/1267777.html

相关文章

一个人全干!之后台管理中的搜索区域的展开收缩组件。

后台管理系统中大多数都有列表的搜索,那么用户的需求又需要必要时收缩搜索区域,需要时再展开。 而且怪的是他还需要一些部分不可收缩,不需要的地方才收缩。使用v-if来解决吧又不咋美观,我们还需要一个简单的动画效果。我们先写一…

perf与火焰图-性能分析工具

参考链接 perf性能分析工具使用分享 如何读懂火焰图?-阮一峰 perf基本用法-record,report-知乎 火焰图抓取 准备: centos安装perf工具 dnf install perf下载火焰图解析代码 git clone https://github.com/brendangregg/FlameGraph.git抓取指定进程…

Elastcsearch:通过 Serverless 提供更多服务

作者:Ken Exner 人们使用 Elasticsearch 解决最大数据挑战的方式一直令我们感到惊讶。 从超过 40 亿次下载、70,000 次提交、1,800 名贡献者以及我们全球社区的反馈中可以清楚地看出这一点。 Elastic 在广泛的用例中发挥的作用促使我们简化复杂性,让搜索…

redis中使用pipeline批量处理请求提升系统性能

在操作数据库时,为了加快程序的执行速度,在新增或更新数据时,可以通过批量提交的方式来减少应用和数据库间的传输次数;在redis中也有这样的技术实现批量处理,也就是管道——Pipeline。它也是通过批量提交数据的方式来实…

深入理解强化学习——马尔可夫决策过程:策略迭代-[贝尔曼最优方程]

分类目录:《深入理解强化学习》总目录 当我们一直采取 arg ⁡ max ⁡ \arg\max argmax操作的时候,我们会得到一个单调的递增。通过采取这种贪心 arg ⁡ max ⁡ \arg\max argmax操作,我们就会得到更好的或者不变的策略,而不会使价值…

接口自动化测试之Yaml数据驱动封装!

一、数据驱动:pytest.mark.parametrize() 首先看个样本: import pytestclass TestData:# parametrize有两个值,一个是args_name:参数名,一个是args_value:参数值,可以有多个,进行数据解包# args_value可以…

logback日志打印操作人

logback日志打印操作人 自定义拦截器 package com.demo.dv.net.config;import com.demo.dv.net.common.domain.UserInfo; import com.demo.dv.net.common.utils.CurrentUserUtil; import org.slf4j.MDC; import org.springframework.stereotype.Component; import org.spring…

【日志技术】附Logback入门教程

文章目录 日志概论日志的体系Logback快速入门日志配置文件配置日志级别 日志概论 什么是日志?其实可以通过下面几个问题来了解的。 系统系统能记住某些数据被谁操作,比如被谁删除了?想分析用户浏览系统的具体情况,比如挖掘用户的…