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会报警告而已，没关系