Naiveui将message挂载到axios拦截器
最近在做项目，需要将后端的请求结果打印出来
但是想着，要是这样一个一个手动引入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会报警告而已，没关系