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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/801854.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【java面试题-Redis篇-2024】

##java面试题大全 详细面试题-持续更新中-点击跳转 点赞、收藏、加关注 java基础面试题 ##java面试题大全1、什么是 Redis2、Redis 的数据结构类型3、Redis 为什么快4、什么是跳跃表5、什么是 I/O 多路复用6、什么是缓存击穿、缓存穿透、缓存雪崩7、什么是布隆过滤器8、热…

经典文章:卷积神经网络的运作原理

https://brohrer.mcknote.com/zh-Hans/how_machine_learning_works/how_convolutional_neural_networks_work.html 参考资料 https://aitechtogether.com/article/38900.html https://www.ruanyifeng.com/blog/2017/07/neural-network.html http://neuralnetworksanddeeplea…

golang 使用 cipher、aes 实现 oauth2 验证

在Go语言中&#xff0c;crypto/cipher包提供了加密和解密消息的功能。这个包实现了各种加密算法&#xff0c;如AES、DES、3DES、RC4等&#xff0c;以及相应的模式&#xff0c;如ECB、CBC、CFB、OFB、CTR等。以下是如何使用crypto/cipher包进行加密和解密操作的基本步骤&#xf…

快速入门Kotlin④集合

集合概述 继承关系(List、Set和Map均继承了Collection) List List 是一个接口,用于表示列表(List)数据结构。它是一个有序的集合,允许重复元素。 listOf 创建的列表是不可变的,而 mutableListOf 创建的列表是可变的,允许对其进行添加、删除和更新操作。 fun main()…

fast_bev 学习笔记

目录 一. 简述二. 输入输出三. github资源四. 复现推理过程4.1 cuda tensorrt 版 训练修改图像数 一. 简述 原文:Fast-BEV: A Fast and Strong Bird’s-Eye View Perception Baseline FAST BEV是一种高性能、快速推理和部署友好的解决方案&#xff0c;专为自动驾驶车载芯片设计…

插入排序解读

在众多的排序算法中&#xff0c;插入排序以其直观易懂和在某些特定场景下的高效性而备受青睐。今天&#xff0c;我们就来深入探索一下插入排序的原理、实现方式以及它的优缺点。 一、算法原理 插入排序相当于打牌中抓牌插入的方式。插入排序的工作方式是通过构建有序序列&…

功能测试_验证qq账号的合法性

案例&#xff1a;验证qq账号的合法性&#xff08;要求&#xff1a;6-10位的自然数&#xff09; 使用等价类设计用例案例&#xff1a; 步骤&#xff1a; 1:明确需求&#xff1a;qq账号的合法性 2:划分等价类&#xff1a;有效等价类、有效取值、无效等价类、无效取值 3&…

三、SpringBoot3 整合 SpringMVC

本章概要 实现过程web 相关配置静态资源处理自定义拦截器(SpringMVC 配置) 3.1 实现过程 创建程序引入依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www…

双目运算符和单目运算符的重载

目录 题目 源码 结果示例 题目 建立一个矩阵类&#xff0c;可以完成指定的操作或运算。 说明&#xff1a; 矩阵为2行3列&#xff0c;基类型为整型&#xff1b;操作或运算&#xff1a;初始化&#xff08;>>&#xff09;、输出&#xff08;<<&#xff09;、赋值…

SpringBoot学习笔记(一)

SpringBootSpringBoot学习笔记&#xff08;一&#xff09; 1.SpringBoot配置2.yml3.SpringBoot配置&#xff08;1&#xff09;Value注解获取配置参数&#xff08;2&#xff09;Environment获取配置参数&#xff08;3&#xff09;ConfigurationProperties方式&#xff08;4&…

使用 Meltano 将数据从 Snowflake 导入到 Elasticsearch:开发者之旅

作者&#xff1a;来自 Elastic Dmitrii Burlutskii 在 Elastic 的搜索团队中&#xff0c;我们一直在探索不同的 ETL 工具以及如何利用它们将数据传输到 Elasticsearch&#xff0c;并在传输的数据上实现 AI 助力搜索。今天&#xff0c;我想与大家分享我们与 Meltano 生态系统以及…

WPF Pack

在WPF中&#xff0c;Pack URI&#xff08;Uniform Resource Identifier&#xff09;是一种特殊格式的统一资源标识符&#xff0c;用于定位和访问应用程序内部或外部的各种资源&#xff0c;如XAML文件、图像、样式、字体等。这种机制允许开发者以标准化、平台无关的方式引用和打…

【Leetcode】【2024048】1544. Make The String Great

做不受欢迎人士的时间比较久&#xff0c;看到有私信下意识以为要挨骂&#xff0c;乐 BGM&#xff1a;思念一个荒废的名字&#xff08;陈楚生《瘾》&#xff09; Descripition Given a string s of lower and upper case English letters. A good string is a string which d…

【Unity优化】模型

初始模型影响性能点 1.最小化面数&#xff0c;不需要微三角形面&#xff08;一个三角面包含个位数像素&#xff09;&#xff0c;三角面尽量分布均匀 2.合理的拓扑结构与平滑组&#xff0c;尽可能是闭包 3.尽量少的材质个数 4.尽可能少的蒙皮网格 5.尽可能少的骨骼数量 6.FK与I…

【每日算法】理论:AIGC算法相关 刷题:力扣哈希表回顾

上期文章 【每日算法】理论&#xff1a; 扩散模型深度学习基础 刷题&#xff1a;力扣哈希表回顾 文章目录 上期文章一、上期问题二、本期问题1、Classifier-free Guidance和Classifier Guidance2、VAE为什么会导致图像变模糊3、SD&#xff0c;Dall-E2两者的异同4、NMS非极大值…

【汇编】_Visual Studio2019写32位汇编

目录 第一步&#xff1a;创建新项目 1. 空项目—下一步 2. 选择位置—填写项目名—创建 第二步&#xff1a;项目生成依赖项 1. 右击项目名—生成依赖项—生成自定义 2. 选中masm—确定 第三步&#xff1a;创建源文件 1. 源文件—添加—新建项 2. 选择C文件—创建新文件…

链表实现学生管理系统

这次我们运用链表的基础知识&#xff0c;增删改查&#xff0c;实现对学生系统进行管理&#xff0c;采用的多文件编程模式&#xff0c;接下来介绍一下什么叫做多文件编程。 程序一般分三类文件&#xff1a; 头文件( .h )。放置各种声明&#xff0c;用于被文件包含。&#xff0…

Android Studio中查看和修改project的编译jdk版本

android studio中查看和修改project的编译jdk版本操作如下&#xff1a; File->settings->Build,Execution,deployment->Build Tools->Gradles 进入Gradles页面可以查看并修改project的编译jdk版本&#xff0c;如图所示

安卓远离手机app

软件介绍 远离手机是专门为防止年轻人上瘾而打造的生活管理类的软件,适度用手机&#xff0c;保护眼睛&#xff0c;节约时间。 下载 安卓远离手机app

设计模式之解释器模式讲解

概念&#xff1a;是一种按照规定语法对表达式进行解析的方案。给定一门语言&#xff0c;定义它的文法的一种表示&#xff0c;并定义一个解释器&#xff0c;该解释器使用该表示来解释语言中的句子。 抽象表达式&#xff1a;定义表达式需要实现的操作。终结符表达式&#xff1a;实…