Vue3-数据交互请求工具设计

1.安装axios

pnpm add axios

2.利用axios.create创建一个自定义的axios来使用

参考官网:axios中文文档|axios中文网 | axios

在src/utils文件夹下新建request.js,封装axios模块

import axios from 'axios'
const baseURL = ''const instance = axios.create({//1.基础地址,超时时间
})instance.interceptors.request.use((config) => {//2.携带tokenreturn config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {//3.处理业务失败//4.摘取核心响应数据return res},(err) => {//5.处理401错误return Promise.reject(err)}
)
export default instance

根据实际api的要求来填充配置

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = ''const instance = axios.create({//1.基础地址,超时时间baseURL,timeout: 10000
})//请求拦截器
instance.interceptors.request.use((config) => {//2.携带tokenconst useSrore = useUserStore()if (useSrore.token) {config.headers.Authorization = useSrore.token}return config},(err) => Promise.reject(err)
)//响应拦截器
instance.interceptors.response.use((res) => {//3.摘取核心响应数据if (res.data.code === 0) {return res}//4.处理业务失败,给错误提示,抛出错误ElMessage.error(res.data.message || '服务异常')return Promise.reject(res.data)},(err) => {//5.处理401错误//错误的特殊情况=>401  权限不足 或 token 到期=>拦截到登录if (err.response.status === 401) {router.push('/login')}//错误的默认情况=>只要给提示ElMessage.error(err.response.data.message || '服务异常')return Promise.reject(err)}
)
export default instance //默认导出
export { baseURL } //按需导出

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

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

相关文章

如何查看电脑内存?Windows 和 Mac 方法不同

Windows 系统查看内存方法 在 Windows 操作系统中我们查看电脑内存在哪里查呢?下面总结的 3 种查看电脑内存的方法都可以使用:使用任务管理器:任务管理器是 Windows 中一个强大的工具,可用于监视和管理计算机的性能和资源使用。使…

Adobe InCopy の Adobe InDesign 大联动

今天我们再来进行Adobe全家桶剩余几位的介绍~ Adobe InCopy是一款专业的文字编辑和校对软件,它是InDesign的附属软件,主要用于编辑、校对和协作文本内容。InCopy提供了一系列功能,使得编辑和校对文本变得更加简单和高效。在InCopy中&#xff…

2023 BUCT 计算方法实验报告

前言 Textlive版本:2023 textstudio版本:4.6.3 名字和日期在以下地方修改: 图片下载地址; figures.zip LiangCha_Xyy/Source - Gitee.com 如下图,.tex文件和figures文件夹放在同一路径下即可 .tex代码 \documentclass[UTF8]{ctexart} \usep…

Electron+Ts+Vue+Vite桌面应用系列:sqlite增删改查操作篇

文章目录 1️⃣ sqlite应用1.1 sqlite数据结构1.2 初始化数据库1.3 初始化实体类1.4 操作数据类1.5 页面调用 优质资源分享 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/134692751 ElectronTsVueVite桌面应用系列 &am…

C++学习专栏【基础知识2】C++数据类型

1、内置数据类型 基本内置类型 C为程序员提供了丰富的内置数据类型以及用户自定义数据类型。以下表格列出了七种基本的 C 数据类型 - 类型关键字布尔值bool字符char整数int浮点数float双精度浮点数double无值void宽字符wchar_t 基本类型中的几种可以使用一个或多个类型修饰符…

Kubernetes 安全最佳实践:保护您的秘密

Kubernetes 是一个可用于微服务的开源容器编排平台。当我们想要部署容器化应用程序、自动化管理和扩展应用程序时,Kubernetes 非常有用。 在容器中运行单个微服务而不是在同一虚拟机中运行多个进程几乎总是更安全。每当我们在 Kubernetes 中启动任何 pod 时&#x…

键盘敲入一个字母,操作系统发生了什么?

一、设备控制器 我们的电脑设备可以接非常多的输入输出设备,比如鼠标键盘网卡硬盘打印机等,每个设备的用法和功能都不相同,那操作系统是如何把这些输入输出设备统一管理的呢? 为了屏蔽设备之间的差异,每个设备都有一…

Zookeeper从零入门笔记

Zookeeper从零入门笔记 一、入门1. 概述2. 特点3. 数据结构4. 应用场景 二、本地1.安装2. 参数解读 三、集群操作3.1.1 集群安装3.2 选举机制1. 第一次启动2. 非第一次启动 3.3 ZK集群启动停止脚本3.4 客户端命令行操作3.2.1 命令行语法3.2.2 节点类型(持久/短暂/有…

六:Day01_Spring Boot01

一、Spring Boot简介 1. 概念简介 Spring Boot是Spring公司的一个顶级项目,和Spring Framework是一个级别的。 Spring Boot实际上是利用Spring Framework 4 自动配置特性完成。编写项目时不需要编写xml文件。 2. 启动器介绍 Spring Boot的启动器实际上就是一个依赖…

热部署怎么部署

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言操作流程:在这里插入图片描述 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a832d83c091742eda9d9325931a89df4.png) 这里的跟上面的…

WPF实战项目十九(客户端):修改RestSharp的引用

修改HttpRestClient,更新RestSharp到110.2.0,因为106版本和110版本的代码不一样,所以需要修改下代码 using Newtonsoft.Json; using RestSharp; using System; using System.Threading.Tasks; using WPFProjectShared;namespace WPFProject.S…

算法通关村第十八关青铜挑战——透析回溯的模板

大家好,我是怒码少年小码。 回溯是最重要的算法思想之一,主要解决一些暴力枚举也搞不定的问题(组合、子集、分割、排列、棋盘等等)。性能并不高,但是哪些暴力枚举都无法ko的问题能解出来就可以了🤣。 这一…

BUUCTF [GXYCTF2019]BabySQli 1 详解!(MD5与SQL之间的碰撞)

题目环境burp抓包 随便输入值 repeater放包 在注释那里发现某种编码 MMZFM422K5HDASKDN5TVU3SKOZRFGQRRMMZFM6KJJBSG6WSYJJWESSCWPJNFQSTVLFLTC3CJIQYGOSTZKJ2VSVZRNRFHOPJ5 看着像是base编码格式 通过测试发现是套加密(二次加密) 首先使用base32对此编码…

项目11:豆瓣首页-页脚 完结撒花!

这次我们就来制作豆瓣首页的最后一部分页脚。 同样,页脚也在container中,页脚分为左区域和右区域,左区域里是多个p元素与a元素结合完成的,还要插入一些图片,右区域里里有几个横向菜单,以及一张图片。 左右…

近期知识点

aop (1) 要求利用AOP记录用户操作日志。内容包含以下信息:ip地址、用户名、请求的地址,请求的时间 ( 4 分) (2)要求利用AOP记录用户操作日志,日志记录到文本文件。内容包含以下信息&#xff…

在Spring Boot中使用JavaMailSender发送邮件

用了这么久的Spring Boot,我们对Spring Boot的了解应该也逐步进入正轨了,这篇文章讲的案例也在我们的实际开发中算是比较实用的了,毕竟我们完成注册功能和对用户群发消息,都可以采用到邮箱发送功能,往下看,…

寿险公司通过开源治理保障数字创新,安全打通高质量服务新通道

某寿险公司致力于为消费者提供人性化的产品和服务,在中国保险市场中始终保持前列。该寿险公司以挖掘和满足客户需求为出发点,从产品开发、渠道销售、运营流程和售后服务等各环节,借助数字化工具,不断地努力探索并提升服务品质。 精…

C++ :运算符重载

运算符重载: 运算符重载概念:对已有的运算符重新进行定义,赋予其另一种功能,以适应不同的数据类型 运算符的重载实际是一种特殊的函数重载,必须定义一个函数,并告诉C编译器,当遇到该重载的运算符…

IDEA中的Postman!

Postman是大家最常用的API调试工具,那么有没有一种方法可以不用手动写入接口到Postman,即可进行接口调试操作?今天给大家推荐一款IDEA插件:Apipost Helper,写完代码就可以调试接口并一键生成接口文档!而且还…

SAP 如何检查已安装的SAP UI5 版本

第一个方法是直接从FLP中查看 但是部分高版本的FLP中没有这个about, 那么在当前界面可以使用:CTRL ALT SHIFT S 查看当前版本 根据此版本,去进行你的UI5的开发吧