vue3使用ts封装axios

 以下是使用 TypeScript 封装 Axios 的示例代码:

//axios.tsimport axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';// 自定义 API 响应类型
interface ApiResponse<T> {code: number;message: string;data: T;
}// 自定义错误类型
interface ApiError {code: number;message: string;
}// 创建自定义的 Axios 实例
const api: AxiosInstance = axios.create({baseURL: 'https://api.example.com', // 设置基础 URLtimeout: 5000, // 请求超时时间
});// 请求拦截器
api.interceptors.request.use((config: AxiosRequestConfig) => {// 在发送请求之前做一些处理,例如添加请求头等// config.headers['Authorization'] = 'Bearer token';return config;},(error: AxiosError) => {// 处理请求错误return Promise.reject(error);}
);// 响应拦截器
api.interceptors.response.use((response: AxiosResponse<ApiResponse<any>>) => {// 在这里对响应进行处理,例如处理错误状态码等const { code, message, data } = response.data;if (code === 0) {// 请求成功return data;} else {// 请求失败,抛出自定义的错误const error: ApiError = {code,message,};return Promise.reject(error);}},(error: AxiosError) => {// 处理响应错误return Promise.reject(error);}
);// 封装 GET 请求
export function get<T>(url: string, params?: any): Promise<T> {return api.get<ApiResponse<T>>(url, { params }).then((response: ApiResponse<T>) => response.data).catch((error: ApiError) => {throw new Error(error.message);});
}// 封装 POST 请求
export function post<T>(url: string, data?: any): Promise<T> {return api.post<ApiResponse<T>>(url, data).then((response: ApiResponse<T>) => response.data).catch((error: ApiError) => {throw new Error(error.message);});
}// 使用示例
get<User[]>('/users').then((users: User[]) => {// 处理获取到的用户数据}).catch((error: Error) => {// 处理错误});post<User>('/users', { name: 'John', age: 30 }).then((user: User) => {// 处理创建用户成功的响应}).catch((error: Error) => {// 处理错误});


在示例代码中,我们使用 TypeScript 创建了一个自定义的 Axios 实例 `api`,并在其中配置了请求拦截器和响应拦截器。我们还封装了 `get` 和 `post` 方法来发起 GET 和 POST 请求,并处理了响应数据和错误。

请注意,示例中的 `ApiResponse` 类型和 `ApiError` 类型是根据具体的 API 响应格式进行定义的,您可以根据自己的实际情况进行调整。此外,您还可以根据需要添加其他的封装方法,例如 PUT、DELETE 等。

希望这个示例能帮助您封装 Axios 并进行 TypeScript 开发。如有任何问题,请随时提问。

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

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

相关文章

中文大语言模型汇总

推荐一篇非常棒的github&#xff1a;Awesome-Chinese-LLM 另附语言模型排行榜&#xff1a;FastChat 里面总结了几乎所有目前主流的中文大语言模型。在此记录一下&#xff0c;方便以后慢慢学习。

单例模式下双重校验锁 DCL 的灵魂三问

文章目录 前言如何实现一个双重校验锁 DCL定义一个单例变量定义一个获取单例的方法性能优化性能优化带来的一点点问题什么是指令重排&#xff1f; 总结如何理解文章开篇理解的三个问题1、为什么需要使用两个 if 语句&#xff1f;2、为什么使用了 synchronized 关键字还需要使用…

AI 引擎系列 4 - 首次运行 AI 引擎编译器和 x86simulator(2022.1 更新)

AI 引擎系列 4 - 首次运行 AI 引擎编译器和 x86simulator&#xff08;2022.1 更新&#xff09; 简介 在 AI 引擎系列的前 3 篇博文中&#xff0c;我们探讨了 AI 引擎应用所需的不同文件。在本篇中&#xff0c;我们将为 X86 目标运行 AI 引擎编译器&#xff0c;观察它生成的不…

二进制搭建 Kubernetes(K8s)

目录 1、环境 1.1 操作系统初始化配置 1.2 部署 docker引擎 1.3 部署 etcd 集群 1.4 准备签发证书环境 1.5 部署 Master 组件 1.6 部署 Worker Node 组件 1.7 部署 CNI 网络组件 1.7.1 部署 flannel 1.7.2 部署 Calico 1.7.3 node02 节点部署 1.7.4 部署 CoreDNS 1…

0-1背包 完全背包 + 至多/恰好/至少 + 空间优化 + 常见变形题(实战力扣题)

&#xff08;一&#xff09;01背包 1.回溯三问 # capacity:背包容量 # w[i]: 第 i 个物品的体积 # v[i]: 第 i 个物品的价值 # 返回:所选物品体积和不超过 capacity 的前提下&#xff0c;所能得到的最大价值和 def zero_one_knapsack(capacity:int,w:List[int],v:List[int])…

【Linux】第八站:gcc和g++的使用

文章目录 一、解决sudo命令的问题二、Linux编译器-gcc/g1.gcc的使用2.g的使用 三、gcc编译链接过程1.预处理2.编译&#xff08;生成汇编&#xff09;3.汇编&#xff08;生成机器可识别代码&#xff09;4.链接&#xff08;生成可执行文件或库文件&#xff09;5.一些选项的意义 四…

决策树算法的实现

决策树是一种机器学习算法&#xff0c;它类似于人脑思考问题的过程。我们可以通过问一系列的问题来逐步缩小答案的范围&#xff0c;最终得到最终的答案。 比如说&#xff0c;我们想要预测一个人是否会购买某个产品&#xff0c;我们可以通过一系列的问题来缩小预测范围。例如&a…

Docker容器技术实战3

8、docker原生网络 Docker原生网络基于Linux桥接技术和虚拟网络接口&#xff0c;使用了Linux内核的网络功能。每个Docker容器都有自己的网络命名空间&#xff0c;这使得容器之间可以使用独立的IP地址&#xff0c;并隔离了容器的网络栈。 当创建一个Docker原生网络时&#xff…

Airtest工具根据App页面文字信息提取坐标进行截图保存在自定义文件夹

Airtest工具根据App页面文字信息提取坐标进行截图保存在自定义文件夹 一、项目背景 在一个项目中&#xff0c;选项被选中和未选中的节点元素的属性值无变化&#xff0c;通过AI识别率达不到百分百&#xff0c;想着通过计算图片的HSV值来判断选择能否被选中。&#xff08;HSV比…

ESP32 for Arduino 分区信息

忘记过去&#xff0c;超越自己 ❤️ 博客主页 单片机菜鸟哥&#xff0c;一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-11-04❤️❤️ 本篇更新记录 2023-11-04❤️&#x1f389; 欢迎关注 &#x1f50e;点赞 &#x1f44d;收藏 ⭐️留言&#x1f4dd;&#x1f64f;…

【JAVA学习笔记】59 - JUnit框架使用、本章作业

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter15/src/com/yinhai/homework JUnit测试框架 1.基本介绍 1. JUnit是一个Java语言的单元测试框架 2.多数Java的开发环境都已经集成了JUnit作为单元测试的工具 2.如何使用 创建方法后&#x…

QtC++与QVariant详解

什么是 QVariant&#xff1f; QVariant 是 Qt 中的一个类&#xff0c;允许您以一种通用的方式存储和访问数据&#xff0c;即使这些数据具有不同的数据类型。它在许多情况下非常有用&#xff0c;例如在模型视图编程、数据序列化、设置和配置管理等领域。QVariant 可以包含以下类…

JVM离线分析-使用MAT分析dump堆文件

1. MAT&#xff08;Memory Analyzer Tool&#xff09;的介绍 官方介绍 The Eclipse Memory Analyzer is a fast and feature-rich Java heap analyzer that helps you find memory leaks and reduce memory consumption. Use the Memory Analyzer to analyze productive heap …

Java随机获取某个范围内的随机整数

随机获取某个范围内的随机整数 一、代码 /*** 随机获取某个范围内的随机整数的值* param min 最小值* param max 最大值* return*/public static int randomNum(int min,int max) {// 创建一个Random对象Random random new Random();// 生成指定范围内的随机整数int randomI…

通过@ConfigrationProperties读取配置文件属性并赋值

这种设计使得 Anything 成为 Something 类的静态成员&#xff0c;因此不依赖于外部类的实例。静态内部类通常更独立&#xff0c;它们可以单独存在且无需引用外部类的实例。 如果将 Anything 类定义为非静态的内部类&#xff0c;它将依赖于 Something 类的实例。这意味着每个 S…

牛客周赛 Round 17

A、 题目描述&#xff1a; 游游拿到了一个边长为n的正方形披萨&#xff0c;她准备切k刀&#xff08;每刀只能横着或竖着切开&#xff09;&#xff0c;最终会形成若干个小矩形披萨。游游希望每个小披萨的面积相等&#xff0c;且矩形的长和宽的差的绝对值尽可能小。你能帮游游求出…

vue中的rules表单校验规则使用方法 :rules=“rules“

一、el-form里面必写属性值 :ref"dataForm" // 提交表单时进行校验 :rules"rules" // return 下的校验规则 :model"userForm" // 绑定表单的值 <el-formref"dataForm" // 必写属性值:rules"rules"…

CV论文阅读大合集

YearNameAreamodeldescriptiondrawback2021 ICMLClip &#xff08;Contrastive Language-Image Pre-training&#xff09;contrastive learning、zero-shot learing、mutimodel用文本作为监督信号来训练可迁移的视觉模型CLIP’s zero-shot performance, although comparable to…

Eureka处理流程

1、Eureka Server服务端会做什么 1、服务注册 Client服务提供者可以向Server注册服务&#xff0c;并且内部有二层缓存机制来维护整个注册表&#xff0c;注册表是Eureka Client的服务提供者注册进来的。 2、提供注册表 服务消费者用来获取注册表 3、同步状态 通过注册、心跳机制…

海康多相机同步取流保存图片

话不多说&#xff0c;直接上代码。代码里包含了多窗口显示图像和保存图片。 #"rtsp://admin:123456qq192.168.10.192/stream1" # rtsp://admin:Admin123192.168.100.103:554/Streaming/Channels/101 #rtsp://admin:Admin123192.168.100.103:554/cam/realmonitor?ch…