最近在做项目,需要将后端的请求结果打印出来
但是想着,要是这样一个一个手动引入naiveui的msg,那不得累死
于是灵机一动,想着既然所有接口要通过拦截器,为什么不将msg写在拦截器呢
一、定义一个消息挂载文件
// TheMessage.vue 为与src/component下的单例组件
<template><div></div>
</template>
<script lang="ts" setup>
import { useMessage } from 'naive-ui'
window.$message = useMessage()
</script>
二、全局挂载
// App.vue
<template><n-config-provider :theme="naiveTheme"><n-modal-provider><n-message-provider><router-view /><TheMessage></TheMessage></n-message-provider></n-modal-provider></n-config-provider>
</template><script setup lang="ts">
import { NConfigProvider } from 'naive-ui'
import { naiveTheme } from 'vue-dark-switch'
</script><style scoped></style>
这里,这里你在哪里要用到msg,就把他使用<n-message-provider>包裹住,我这里<router-view />手动用了,所以新组件和<router-view />都包起来
三、使用
// request.ts axios拦截器定义的地方
// 重写响应拦截器规则instance.interceptors.response.use((response: any) => {// 对响应数据做点什么console.log('对响应数据做点什么呢?', response.data.msg)if (response.data.code !== 200) {window.$message.error(response.data.msg)} else {window.$message.success(response.data.msg)}return response},(error: any) => {// 对响应错误做点什么console.log('对响应错误做点什么呢?', error)return Promise.reject(error)},)
作者是vite+ts的项目架构,亲测可用,只是TS会报警告而已,没关系