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

FoxMale007

已于 2024-05-26 14:27:50 修改

阅读量224

点赞数 4

分类专栏： JavaScript应用代码文章标签： mitt uniapp messagebox typescript

于 2024-05-26 14:21:27 首次发布

本文链接：https://blog.csdn.net/applebomb/article/details/139213667

版权

JavaScript应用代码专栏收录该内容

15 篇文章 0 订阅

订阅专栏

痛点

目前在设计一个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
    >
      <view
        class="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 = data
    if (!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!: number
  success!: boolean
  message?: string
  result?: 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 是和后端约定的业务 code
    const code = apiData.code
    // 如果没有 code, 代表这不是项目后端开发的 api
    if (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)
    }
  }
)