【uni-best+UView】使用mitt实现自定义错误对话框

痛点

目前在设计一个uni-best的前端全局的异常提示信息,如果采用Toast方式,对微信支持的不友好。微信的7中文长度连个NPE信息都无法完整显示,更不用提Stacktrace的复杂报错了。如果使用对话框,必须在页面先预先定义,对开发起来也非常不友好,必须复制粘贴一堆相同的代码。因此希望采用一种开发和使用便捷的方式实现错误及信息提示。

思考

为了简化整个开发流程,需要利用已有的框架的几个特性:

1)uni-best(实际是uni-helper/vite-plugin-uni-pages的支持)支持layout模板,我们可以把一些公共的特性写到模板

2)mitt可以实现一个全局的事件总线,这样我们可以把异常信息封装的util工具里,随时可以进行调用

目标

最终要实现的目标,是until工具随时可以调用对话框模块。实现一个简单的模式对话框模式,不考虑多个对话框叠加的栈。如果多个异常,会更新弹出对话框里显示的内容。

utils.message('我靠范德萨范德萨范德萨范德萨富士达放到撒范德萨发生大')

触发对话框

后端抛个全局异常

    @GetMapping("uuid")@ApiOperation(value = "页面唯一key", notes="此方法可以用于获得服务器唯一页面id,用于验证码sid、短信验证sid等请求,会使用uuid为key缓存发送的验证码")@ApiResponses({@ApiResponse(code = 200, message="22位压缩UUID")})public String uuid() {if(true)throw BusinessException.simpleException("不可以,不可以这样用啊");return UUIDUtil.randomBASE64();}

实现

STEP1

在公共模板default.vue里添加u-popup对话框。启动事件里,注册一个全局的messagebox事件

<template><view class="default-layout"><!-- 顶部自定义导航 --><!-- <TnNavbar fixed :bottomShadow="false" bgColor="rgba(0,0,0,0)" customBack><template v-slot:back><view class="relative box-border flex items-center justify-evenly w-full h-full text-white text-lg bg-opacity-15 bg-black border border-white/50 rounded-full" @click="goBack"><text class="flex-1 mx-auto text-center"></text><text class="icon tn-icon-home-capsule-fill"></text></view></template></TnNavbar> --><slot /><u-popup:show="showPopup":z-index="99999"mode="center":round="10"@close="showPopup = !showPopup"closeable><viewclass="p-50rpx pt-60rpx overflow-auto box-border"style="max-width: 600rpx; max-height: 600rpx"><pre class="break-all whitespace-pre-wrap">{{ popupMessage }}</pre></view></u-popup></view>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import * as utils from '@/utils'
import * as Global from '@/commons/constants'const showPopup = ref<boolean>(false)
const popupMessage = ref<string>()
const ready = ref<boolean>(false)// methods
const goBack = () => {const pages = getCurrentPages()if (pages && pages.length > 0) {const firstPage = pages[0]if (pages.length === 1 && (!firstPage.route || firstPage.route !== 'pages/index/index')) {uni.reLaunch({url: '/pages/index/index'})} else {uni.navigateBack({delta: 1})}} else {uni.reLaunch({url: '/pages/index/index'})}
}onMounted(() => {utils.on(Global.CC_MESSAGE_BOX, (data) => {popupMessage.value = dataif (!showPopup.value) {if (ready.value) {showPopup.value = true} else {console.log('delay....')setTimeout(() => {showPopup.value = true}, 300)}}})setTimeout(() => {ready.value = true}, 300)
})
</script><style lang="scss">
.tn-custom-nav-bar__back {position: relative;box-sizing: border-box;display: flex;align-items: center;justify-content: space-evenly;width: 100%;height: 100%;font-size: 18px;color: #fff;background-color: rgb(0 0 0 / 15%);border: 1rpx solid rgb(255 255 255 / 50%);border-radius: 1000rpx;.icon {display: block;flex: 1;margin: auto;text-align: center;}&::before {position: absolute;top: 22.5%;right: 0;left: 0;box-sizing: border-box;width: 1rpx;height: 110%;margin: auto;pointer-events: none;content: ' ';background-color: #fff;opacity: 0.7;transform: scale(0.5);transform-origin: 0 0;}
}.default-layout {height: 100vh;overflow: auto;
}
/* 修正弹窗的关闭按钮位置 */
.u-popup__content {.u-popup__content__close {top: 20rpx;}
}
</style>

STEP2

在util/index.ts里,注册全局触发事件

import mitt from 'mitt'const emitter = mitt()export function on(event: string, listener: (data: any) => void) {return emitter.on(event, listener)
}export function off(event: string, listener: (data: any) => void) {return emitter.off(event, listener)
}export function emit(event: string, data: any) {return emitter.emit(event, data)
}export function message(str: string) {return emitter.emit('cc-message', str) // 触发全局的alert
}

STEP3

uni-app的请求采用luch-request框架,因此在requestObj.interceptors里定义自己的错误消息处理逻辑,使用util.message提示错误,部分代码:

import { message } from '@/utils'const modalRef = ref<TnModalInstance>()// uni-app的axios包装
const logoutExceptions = ['errors.auth.noAuth','org.springframework.security.authentication.InsufficientAuthenticationException','io.jsonwebtoken.ExpiredJwtException', // JWT Token过期'io.jsonwebtoken.SignatureException'
]export class Result<T> {// ccframe约定返回code!: numbersuccess!: booleanmessage?: stringresult?: T
}const requestObj: Request = new Request()requestObj.interceptors.request.use((config) => config,(error) => Promise.reject(error)
)requestObj.interceptors.response.use((response) => {// apiData 是 api 返回的数据const apiData = response.data// 这个 code 是和后端约定的业务 codeconst code = apiData.code// 如果没有 code, 代表这不是项目后端开发的 apiif (code === undefined) {message('非本系统的接口')return Promise.reject(new Error('非本系统的接口'))}const result = apiData as Result<any>if (result.success) {return result.result} else {message(apiData.message || 'Error')return Promise.reject(result) // 异常可以用catch捕获并进行额外处理}},async (error) => {if (error?.data) {const errorData = error.data as Result<any>message(errorData.message || 'Error')if (errorData.code === 403 && logoutExceptions.includes(errorData.result)) {// logout()// TODO 清理vuex缓存,并去登录页}return Promise.reject(errorData)}}
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/841404.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

链表类型的有界或无界阻塞线程安全队列-LinkedBlockingQueue(FIFO)和LinkedBlockingDeque

LinkedBlockingQueue和LinkedBlockingDeque基本上大部分特性是相同的。 注意:所有代码源码都是LinkedBlockingQueue的。 特点: 都继承于AbstractQueue并实现BlockingQueue,说明有Queue的一些特性例如FIFO和一些方法。两个都是链表结构且结构可变(动态数组),最大容量2^31…

时间(空间)复杂度(结构篇)

目录 前言&#xff1a; 一、时间复杂度 1.1 时间复杂度的定义 1.2 时间复杂度的分析 表示方法&#xff1a; 1.3 常见的时间复杂度 1.4 时间复杂度的计算以及简单的分析 冒泡排序 折半查找&#xff08;二分查找&#xff09; 斐波那契数列&#xff08;递归&#xff09…

OSPF网络类型实验2

对R4 对R5&#xff0c;找R1注册 对R1宣告环回&#xff0c;再宣告一下tunnel接口 本实验不考虑区域划分 现在已经全部宣告完成 对R1&#xff0c;2&#xff0c;3改接口 broadcast工作方式hello时间10s&#xff0c;然后进行dr选举&#xff0c;由于2&#xff0c;3之间没有伪广播 …

ciscn2024(上传一下,有侵权什么的问题的话联系删除)

Web Simple_php 这个Simple_php一点儿也不Simple (⋟﹏⋞) 源码放这儿了&#xff1a; <?phpini_set(open_basedir, /var/www/html/); error_reporting(0);if(isset($_POST[cmd])){$cmd escapeshellcmd($_POST[cmd]); if (!preg_match(/ls|dir|nl|nc|cat|tail|more|flag…

Yolov9调用COCOAPI生成APs,APm,APl

最近在做小目标检测的东西&#xff0c;因为后期毕业论文需要&#xff0c;所以开始使用Yolov9模型&#xff0c;运行val.py的时候不会自己产生小目标的AP指标&#xff0c;所以研究了一下&#xff0c;步骤非常简单&#xff1a; 第一步&#xff1a; 在数据集中生成json格式的Annota…

【Text2SQL 经典模型】HydraNet

论文&#xff1a;Hybrid Ranking Network for Text-to-SQL ⭐⭐⭐ arXiv:2008.04759 HydraNet 也是利用 PLM 来生成 question 和 table schema 的 representation 并用于生成 SQL&#xff0c;并在 SQLova 和 X-SQL 做了改进&#xff0c;提升了在 WikiSQL 上的表现。 一、Intro…

有趣的css - 加减动态多选框

大家好&#xff0c;我是 Just&#xff0c;这里是「设计师工作日常」&#xff0c;今天分享的是用 css 实现一个适用树形菜单场景的加减动态多选框。 最新文章通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面css 样式页面…

【调试笔记-20240525-Windows-配置 QEMU/x86_64 运行 OpenWrt-23.05 发行版并搭建 WordPress 博客网站】

调试笔记-系列文章目录 调试笔记-20240525-Windows-配置 QEMU/x86_64 运行 OpenWrt-23.05 发行版并搭建 WordPress 博客网站 文章目录 调试笔记-系列文章目录调试笔记-20240525-Windows-配置 QEMU/x86_64 运行 OpenWrt-23.05 发行版并搭建 WordPress 博客网站 前言一、调试环境…

数组的理论知识

文章目录 数组的理论知识 数组的理论知识 数组是我们在编程时期经常使用到的一种数据结构。 特点&#xff1a; 在连续的内存空间中存储相同数据类型的数据 如图&#xff1a; arr 数组 注意点&#xff1a;数组的修改的效率是比较慢的&#xff0c;O(n)&#xff0c;因为数组只…

人工智能万卡 GPU 集群的硬件和网络架构

万卡 GPU 集群互联&#xff1a;硬件配置和网络设计 一、背景 自从 OpenAI 推出 ChatGPT 以来&#xff0c;LLM 迅速成为焦点关注的对象&#xff0c;并取得快速发展。众多企业纷纷投入 LLM 预训练&#xff0c;希望跟上这一波浪潮。然而&#xff0c;要训练一个 100B 规模的 LLM&a…

嵌入式学习——3——多点通信

1、套接字选项&#xff08;socket options&#xff09; int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen); int setsockopt(int sockfd, int level, int optname, const void *optval, socklen_t optlen); 功能&#xff1a;获取或设置套接…

设计模式在芯片验证中的应用——单例

一、单例模式 单例模式(Singleton)是一种创建型设计模式&#xff0c;能够保证一个类只有一个实例&#xff0c; 并提供一个访问该实例的全局节点。验证环境配置(configuration)类、超时(timeout)处理类等可以使用单例实现。比如说验证环境需要在特定场景中监测特定接口上的超时事…

STM32-GPIO八种输入输出模式

图片取自 江协科技 STM32入门教程-2023版 细致讲解 中文字幕 p5 【STM32入门教程-2023版 细致讲解 中文字幕】 https://www.bilibili.com/video/BV1th411z7sn/?p5&share_sourcecopy_web&vd_source327265f5c70f26411a53a9226af0b35c 目录 ​编辑 一.STM32的四种输…

达梦数据库创建根据日期按月自动分区表

达梦数据库创建根据日期自动分区表 概念 达梦数据交换平台(简称DMETL)是在总结了众多大数据项目经验和需求并结合最新大数据发展趋势和技术的基础上&#xff0c;自主研发的通用的大数据处理与集成平台。 DMETL创新地将传统的ETL工具&#xff08;Extract、Transform、Loading…

maven默认src下的xml,properties文件不打包到classes文件夹下

一、第一种是建立src/main/resources文件夹&#xff0c;将xml&#xff0c;properties等资源文件放置到这个目录中。maven工具默认在编译的时候&#xff0c;会将resources文件夹中的资源文件一块打包进classes目录中。 这时候注意把resources设置成resource目录&#xff0c;已经…

CI/CD 管道中的自动化测试:类型和阶段

在上一篇文章中&#xff0c;我们讨论了敏捷团队自动化测试用例的各种用例。其中一种情况是&#xff0c;团队希望将测试与每个构建集成&#xff0c;并将持续集成作为构建过程的一部分。 在本文中&#xff0c;我们将讨论持续集成/持续交付平台中的集成测试。 让我们先从基础知识…

Sentinel Dashboard 规则联动持久化方案

一、Sentinel Dashboard 规则联动持久化方案 Sentinel 是阿里开源的一个流量控制组件&#xff0c;它提供了一种流量控制、熔断降级、系统负载保护等功能的解决方案。并且我们通过 Sentinel Dashboard 可以非常便捷的添加或修改规则策略&#xff0c;但是如果细心的小伙伴应该可…

Jenkins、GitLab部署项目

1、安装JDK 1.1、下载openJdk11 yum -y install fontconfig java-11-openjdk1.2、查看安装的版本号 java -version1.3、配置环境变量 vim /etc/profile在最底部添加即可 export JAVA_HOME/usr/lib/jvm/java-11-openjdk-11.0.23.0.9-2.el7_9.x86_64 export PATH$JAVA_HOME/…

经典链表题-链表回文结构

&#x1f389;&#x1f389;&#x1f389;欢迎莅临我的博客空间&#xff0c;我是池央&#xff0c;一个对C和数据结构怀有无限热忱的探索者。&#x1f64c; &#x1f338;&#x1f338;&#x1f338;这里是我分享C/C编程、数据结构应用的乐园✨ &#x1f388;&#x1f388;&…

神经网络的工程基础(一)——利用PyTorch实现梯度下降法

相关说明 这篇文章的大部分内容参考自我的新书《解构大语言模型&#xff1a;从线性回归到通用人工智能》&#xff0c;欢迎有兴趣的读者多多支持。 本文涉及到的代码链接如下&#xff1a;regression2chatgpt/ch06_optimizer/gradient_descent.ipynb 本文将讨论利用PyTorch实现…