建设企业网站专业服务,wordpress 网页模块错位,网站建设目的和功能定位,wordpress 整站播放器最近在做项目#xff0c;需要将后端的请求结果打印出来
但是想着#xff0c;要是这样一个一个手动引入naiveui的msg#xff0c;那不得累死
于是灵机一动#xff0c;想着既然所有接口要通过拦截器#xff0c;为什么不将msg写在拦截器呢 一、定义一个消息挂载文件
// The…最近在做项目需要将后端的请求结果打印出来
但是想着要是这样一个一个手动引入naiveui的msg那不得累死
于是灵机一动想着既然所有接口要通过拦截器为什么不将msg写在拦截器呢 一、定义一个消息挂载文件
// TheMessage.vue 为与src/component下的单例组件
templatediv/div
/template
script langts setup
import { useMessage } from naive-ui
window.$message useMessage()
/script二、全局挂载
// App.vue
templaten-config-provider :themenaiveThemen-modal-providern-message-providerrouter-view /TheMessage/TheMessage/n-message-provider/n-modal-provider/n-config-provider
/templatescript setup langts
import { NConfigProvider } from naive-ui
import { naiveTheme } from vue-dark-switch
/scriptstyle 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)},)
作者是vitets的项目架构亲测可用只是TS会报警告而已没关系
