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