当前位置：首页 > news >正文

Axios结合Typescript 二次封装完整详细场景使用案例

news 来源：原创 2025/6/20 16:46:28

Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。二次封装 Axios 主要是为了统一管理 HTTP 请求，例如设置统一的请求前缀、头部、超时时间，统一处理请求和响应的格式，以及错误处理等。

以下是一个使用 TypeScript 进行 Axios 二次封装的详细场景使用案例：

1. 创建 Axios 实例

首先，创建一个 Axios 实例，并配置通用参数。

import axios from 'axios';const instance = axios.create({baseURL: 'https://api.example.com',timeout: 10000, // 请求超时时间headers: {'Content-Type': 'application/json'}
});export default instance;

2. 统一请求处理

封装请求方法，包括统一的请求前缀、头部处理等。

// http.ts
import axios from './path/to/axiosInstance';// 添加一个通用的请求前缀
function request(url: string, config?: AxiosRequestConfig) {const fullPath = `/api/${url}`;// 可以在这里添加通用的 header 或其他配置const defaultConfig = {headers: {'Authorization': `Bearer ${localStorage.getItem('token')}`}};return axios({url: fullPath,...config,...defaultConfig});
}export default request;

3. 响应拦截器

处理响应拦截器，统一处理响应数据格式。

// http.ts (继续上面的代码)
import axios, { AxiosInstance } from 'axios';// 响应拦截器
instance.interceptors.response.use(response => {// 对响应数据做点什么return response.data;
}, error => {// 对响应错误做点什么return Promise.reject(error);
});export default instance;

4. 错误处理

统一处理 HTTP 请求错误。

// http.ts (继续上面的代码)
import { AxiosError } from 'axios';// 使用封装的请求函数
function handleError(error: AxiosError) {if (error.response) {// 请求已发出，服务器响应了状态码 2xx 之外的其他状态console.error(error.response.data);console.error(error.response.status);console.error(error.response.headers);} else if (error.request) {// 请求已发出但没有收到响应console.error(error.request);} else {// 发生了触发请求错误的问题console.error('Error', error.message);}return Promise.reject(error);
}export { handleError };

5. 使用封装的 HTTP 客户端

在组件或其他服务中使用封装的 HTTP 客户端进行请求。

// SomeComponent.vue
import http from './path/to/http';
import { handleError } from './path/to/http';export default {async created() {try {const response = await http('/user', {method: 'get'});this.user = response.data;} catch (error) {handleError(error);}}
};

6. 封装特定的 API 请求

创建特定的 API 服务文件，如用户服务。

// api/user.ts
import http from '../http';export const getUser = (userId: string) => http(`/users/${userId}`);
export const updateUser = (userId: string, userData: object) => http(`/users/${userId}`, {method: 'put',data: userData
});// 其他 API 调用 ...

7. 使用特定的 API 服务

在组件中使用特定的 API 服务。

// SomeComponent.vue
import { getUser, updateUser } from './api/user';export default {methods: {async fetchUser() {try {const user = await getUser('123');this.user = user;} catch (error) {handleError(error);}},async saveUser() {try {await updateUser('123', { name: 'New Name' });} catch (error) {handleError(error);}}}
};

通过上述步骤，你可以创建一个可维护性高、易于使用的 HTTP 客户端，它包括统一的配置、拦截器、错误处理和 API 调用封装。这使得在项目中进行 API 请求变得更加一致和方便。

Axios结合Typescript 二次封装完整详细场景使用案例

Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。二次封装 Axios 主要是为了统一管理 HTTP 请求，例如设置统一的请求前缀、头部、超时时间，统一处理请求和响应的格式，以及错误处理等。以下是一个使用 TypeScrip…...

编程日记 2025/6/20 16:46:28

C++面试：HTTP1.0/1.1，HTTP2.0，HTPP3.0的区别

1.你对HTTP1.0/1.1，HTTP2.0，HTPP3.0有什么了解？ 答：HTTP1.0： ①属于无连接式，每次发送HTTP请求都需要建立TCP连接。 ②会造成发送时的对头阻塞，当上一个请求没有应答，当前的请求就会…...

编程日记 2025/6/20 5:39:33

使用 Docker Compose 部署 Redis 主从与 Sentinel 高可用集群

文章目录使用 Docker Compose 部署 Redis 主从与 Sentinel 高可用集群Redis 主从架构简介Redis Sentinel 简介配置文件1. 主节点配置 (redis-master.conf)2. 从节点配置 (redis-slave1.conf 和 redis-slave2.conf)redis-slave1.confredis-slave2.conf3. Sentinel 配置 (sentin…...

编程日记 2025/6/20 16:45:21

【Java】4、虚拟机 JVM

目录 Java内存区域详解(重点) JVM垃圾回收详解(重点) 类文件结构详解类加载过程详解类加载器详解(重点) 最重要的JVM参数总结 JDK监控和故障处理工具总结 JVM线上问题排查和性能调优案例参考： JVM 核心技术 32 讲深入浅出 Java 虚拟机...

编程日记 2025/6/20 16:21:26

Vue3之组合式API详解

Vue 3引入了一种新的API风格——组合式API（Composition API），旨在提升组件的逻辑复用性和可维护性。本文将详细阐述Vue 3中的组合式API，包括其定义、特点、使用场景、优势等，并给出具体的示例代码。一、定义组合式…...

编程日记 2025/6/19 17:54:45

Flutter编译Module was compiled with an incompatible version of Kotlin错误解决

文章目录编译报错如下解决方法修复方案编译报错如下 e: C:/Users/YUAN/.gradle/caches/modules-2/files-2.1/org.jetbrains.kotlin/kotlin-stdlib/1.9.20/e58b4816ac517e9cc5df1db051120c63d4cde669/kotlin-stdlib-1.9 .20.jar!/META-INF/kotlin-stdlib-jdk8.kotlin_module:…...

编程日记 2025/6/20 16:38:43

Uniapp插件如何通过NFC读取多种证卡信息？

nfc读卡uniapp插件，由中软高科进行开发，主要是通过NFC读取居民身份证、港澳台居住证、外国人居住证、护照等证卡的信息。经过多个版本的升级更新，目前性能已趋于稳定，并且读卡速度较之最初版本有了大的提升。注意事项测试使用的…...

编程日记 2025/6/20 15:43:12

本地docker镜像改名字

如果你想修改本地 Docker 镜像的名字，可以通过创建该镜像的新标签（tag）来实现。Docker 中没有直接修改镜像名字的命令，但可以通过重新打标签的方式实现类似的效果。以下是具体步骤： 查看当前镜像： docker…...

编程日记 2025/6/3 10:26:12

VS Code 远程连接 SSH 服务器

文章目录一、安装 Remote - SSH 扩展并连接远程主机二、免密连接远程主机1. 生成 SSH 密钥对2. 将公钥复制到远程服务器3. 配置 SSH 客服端4. 连接测试随着技术的不断迭代更新，在 Linux 系统中使用 Vim、nano 等基于 Shell 终端的编辑器（我曾经也是个 …...

编程日记 2025/6/20 16:25:00

艾体宝案例丨CircleCI 助力 ANA Systems 打造高效 CI/CD 模型

在现代软件开发领域，效率和可靠性是企业在竞争中取胜的关键。本文将深入探讨 ANA Systems 如何通过引入业界领先的 CI/CD 平台——CircleCI，克服传统开发流程的瓶颈，实现开发运营效率的全面提升。同时，本文还将详细解析 CircleCI …...

编程日记 2025/6/20 16:31:11

vue 上传组件 vxe-upload 实现拖拽调整顺序

vue 上传组件 vxe-upload 实现拖拽调整顺序，通过设置 drag-sort 参数就可以启用拖拽排序功能官网：https://vxeui.com/ 图片拖拽排序 <template><div><vxe-upload v-model"imgList" mode"image" multiple drag-sor…...

编程日记 2025/6/2 3:11:16

Elasticsearch的一些介绍

你想问的可能是 **Elasticsearch**，以下是关于它的一些介绍： ### 概述 Elasticsearch是一个基于Apache Lucene库构建的开源分布式搜索和分析引擎，采用Java语言编写，具有高性能、可扩展性和易用性等特点，可用于各种数据…...

编程日记 2025/6/20 16:03:19

从源码构建安装Landoop kafka-connect-ui

背景部署Landoop kafka-connect-ui最简单的办法还是通过docker来部署，我们之前的kafka-connect-ui就是通过docker部署的，但是，最近发现个问题：当使用docker部署且防火墙使用的是firewalld的情况下，就会出现端口冲突。…...

编程日记 2025/6/4 9:12:24

MybatisPlus-扩展功能

代码生成在使用MybatisPlus以后，基础的Mapper、Service、PO代码相对固定，重复编写也比较麻烦。因此MybatisPlus官方提供了代码生成器根据数据库表结构生成PO、Mapper、Service等相关代码。只不过代码生成器同样要编码使用，也很麻烦。这里…...

编程日记 2025/6/3 6:18:45

发布/部署WebApi服务器(IIS+.NET8+ASP.NETCore)

CS软件授权注册系统-发布/部署WebApi服务器(IIS.NET8ASP.NETCore) 目录本文摘要VS2022配置发布VS2022发布WebApiIIS服务器部署WebApi 将程序文件复制到云服务器添加网站配置应用程序池配置dns域名配置端口阿里云ECS服务器配置19980端口配置https协议 (申请ssl证书)测试WebAp…...

编程日记 2025/6/2 10:09:26

【2025最新计算机毕业设计】基于SpringBoot+Vue城市中小学体育场馆预约系统【提供源码+答辩PPT+文档+项目部署】

一、项目技术架构： 本项目是一款城市中小学体育场馆预约系统的设计与实现。该SpringBootVue的城市中小学体育场馆预约系统，后端采用SpringBoot架构，前端采用VueElementUI实现页面的快速开发，并使用关系型数据库MySQL存储系统运行…...

编程日记 2025/6/20 15:51:51

Spring Security 6 系列之二 - 基于数据库的用户认证和认证原理

之所以想写这一系列，是因为之前工作过程中使用Spring Security，但当时基于spring-boot 2.3.x，其默认的Spring Security是5.3.x。之后新项目升级到了spring-boot 3.3.0，结果一看Spring Security也升级为6.3.0，关键是其风…...

编程日记 2025/6/20 4:58:58

vue中打包dist文件内static 和 assets 的区别

背景在Vue.js项目中，assets 和 static 是两个用于存放静态资源的文件夹，但它们在使用方式和处理机制上有所不同用途 assets: assets 文件夹通常用于存放那些需要在构建过程中被Webpack处理的静态资源。这些资源可以包括图片、字体、样式文件&#…...

编程日记 2025/6/20 9:35:17

Big Model weekly | 第49期

点击蓝字关注我们 AI TIME欢迎每一位AI爱好者的加入！ 01 Magnetic Preference Optimization: Achieving Last-iterate Convergence for Language Models Alignment 自我对弈方法在多个领域增强模型能力方面展现出了显著的成功。在基于人类反馈的强化学习&#xff0…...

编程日记 2025/6/20 15:36:34

Node.js内置模块

1.内置模块 Node.js的中文网参考手册：https://nodejs.cn//api 帮助文档 API文档：查看对应的模块，左边是模块，右边是模块的成员源码：https://github.com/nodejs/node/tree/main/lib 查看例如: http.js 创建web服务器的模块 -->进入源码中，搜索…...

编程日记 2025/6/3 3:58:34

使用Nexus3搭建npm私有仓库

一、npm介绍 npm的全称是Node Package Manager，它是一个开放源代码的命令行工具，用于安装、更新和管理Node.js模块。npm是Node.js的官方模块管理器，它允许用户从一个集中的仓库中下载和安装公共的Node.js模块，并将这些模块集成到…...

编程日记 2025/6/3 19:24:56

MySQL学习之表操作

MySQL学习之表操作基础命令查询当前所在数据库的所有表 show tables;查看指定的表结构, 可以查看到指定表的字段，字段的类型、是否可以为NULL，是否存在默认值等信息 mysql> desc user; ----------------------------------------------- | Field |…...

编程日记 2025/6/20 16:09:33

C语言学习day22：ReadProcessMemory函数/游戏内存数据读取工具开发

简言： ReadProcessMemory函数是 Windows API 中的一个函数，用于从目标进程的虚拟内存空间中读取数据。这个函数非常有用，尤其是在进行内存分析、调试、或某些类型的逆向工程时。 ReadProcessMemory函数函数原型 BOOL ReadProcessMemory(…...

编程日记 2025/6/20 16:07:57

Linux虚拟文件系统

参考：深入分析LINUX内核源码深入分析Linux内核源码 (kerneltravel.net) 作为一个最著名的自由软件，Linux 确实名不虚传，几乎处处体现了“自由”，你可以编译适合自己系统要求的内核，或者轻松添加别人开发的新的模块。只…...

编程日记 2025/6/19 19:20:26

OpenIPC开源FPV之Adaptive-Link天空端代码解析

OpenIPC开源FPV之Adaptive-Link天空端代码解析 1. 源由2. 框架代码3. 报文处理3.1 special报文3.2 普通报文 4. 工作流程4.1 Profile 竞选4.2 Profile 研判4.3 Profile 应用 5. 总结6. 参考资料7. 补充资料7.1 RSSI 和 SNR 的物理含义7.2 信号质量加权的理论依据7.3 实际应用中…...

编程日记 2025/6/20 16:42:16

NPU是什么？电脑NPU和CPU、GPU区别介绍

随着人工智能技术的飞速发展，计算机硬件架构也在不断演进以适应日益复杂的AI应用场景。其中，NPU（Neural Processing Unit，神经网络处理器）作为一种专为深度学习和神经网络运算设计的新型处理器，正逐渐崭露头…...

编程日记 2025/6/19 20:22:25

.Net WebAPI（一）

文章目录项目地址一、WebAPI基础1. 项目初始化1.1 创建简单的API1.1.1 get请求1.1.2 post请求1.1.3 put请求1.1.4 Delete请求 1.2 webapi的流程 2.Controllers2.1 创建一个shirts的Controller 3. Routing3.1 使用和创建MapControllers3.2 使用Routing的模板语言 4. Mould Bind…...

编程日记 2025/6/1 15:45:50

.NET 技术 | 调用系统API创建Windows服务

01阅读须知此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等（包括但不限于）进行检测或维护参考，未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…...

编程日记 2025/5/30 8:42:49

OpenLinkSaas 2025年1月开发计划

先来看看OpenLinkSaas的大目标在OpenLinkSaas的产品目标中，让开发人员更加方便的使用云资源是目标之一。通过各大云厂商的API，来可视化云上基础设施的数据是远远不够的。我们准备在2025年1月份增加方便管理和运营研发场景下服务器的能力。这部分的功能…...

编程日记 2025/6/4 16:30:59

同态加密算法详解及Python实现

目录同态加密算法详解及Python实现第一部分：同态加密概述与原理1.1 什么是同态加密？同态加密的定义：1.2 同态加密的分类1.3 同态加密的优势与挑战优势挑战第二部分：常见同态加密算法及其应用场景2.1 RSA同态加密支持操作应用场景2.2 Paillier加密支持操作应用场景2.3 Gent…...

编程日记 2025/6/3 23:45:25

【HarmonyOS NEXT】ArkTs函数、类、接口、泛型、装饰器解析与使用

1. 前置学习文档【HarmonyOS NEXT】ArkTs数据类型解析与使用(https://juejin.cn/spost/7448894500348608522) 2. 前言在原生JavaScript中只有函数和类的实现，为了更好的面向对象编程，TypeScript 引入了接口、泛型、装饰器等特性。ArkTS也继承了这些特性…...

编程日记 2025/6/2 17:43:09

【数学】矩阵的逆与伪逆 EEGLAB

文章目录前言matlab代码作用EEGLAB 中的代码总结参考文献前言在 EEGLAB 的使用中，运行程序时出现了矩阵接近奇异值，或者缩放错误。结果可能不准确。RCOND 1.873732e-20 的 bug，调查 EEGLAB 后发现是 raw 数据的问题。 matlab代码 A_1 …...

编程日记 2025/6/19 19:54:34

用github镜像加速， --recursive还是去github站怎么处理？

小伙伴们大多碰到过github抽风的情况，时通时断，时快时慢，非常考验心情。以前碰到连不上的时候，我大多就是在gitee和gitcode网站找一下镜像，找到后直接git clone 新地址即可。但是碰到 --recursive的时候就不行了&…...

编程日记 2025/6/4 7:27:42

第P2周：Pytorch实现CIFAR10彩色图片识别

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊目标实现CIFAR-10的彩色图片识别实现比P1周更复杂一点的CNN网络具体实现 （一）环境语言环境：Python 3.10 编译器: …...

编程日记 2025/6/3 8:34:43

springboot3访问第三方接口

添加依赖（如果尚未添加） 在pom.xml文件中，确保已经包含spring-boot-starter-web依赖，因为RestTemplate通常在这个依赖范围内。如果没有，添加如下依赖： <dependency><groupId>org.springframe…...

编程日记 2025/6/19 20:53:47

Ubuntu K8s

https://serious-lose.notion.site/Ubuntu-K8s-d8d6a978ad784c1baa2fc8c531fbce68?pvs74 2 核 2G Ubuntu 20.4 IP 172.24.53.10 kubeadmkubeletkubectl版本1.23.01.23.01.23.0 kubeadm、kubelet 和 kubectl 是 Kubernetes 生态系统中的三个重要组件 kubeadm： 主…...

编程日记 2025/6/20 11:23:21

大数据第三次周赛

类斐波那契循环数 #include<bits/stdc.h> using namespace std; #define int long long int arr[1000010]; bool key(int k){int num0;string strto_string(k);for(int i0;i<str.length();i){arr[num]str[i]-0;}int l0,rnum-1;int shix0; while(shix<k){shix0;for…...

编程日记 2025/6/3 17:49:40

《Java核心技术I》Swing用户界面组件

Swing和模型-视图-控制器设计模式用户界面组件各个组成部分，如按钮，复选框，文本框或复杂的树控件，每个组件都有三个特征： 内容，如按钮的状态，文本域中的文本。外观，颜色&#xff0c…...

编程日记 2025/6/4 1:52:44

Web开发 -前端部分-CSS

CSS CSS（Cascading Style Sheet）:层叠样式表，用于控制页面的样式（表现）。一基础知识 1 标题格式标题格式一： 行内样式 <!DOCTYPE html> <html lang"en"><head><meta…...

编程日记 2025/6/3 2:45:44

旅游系统旅游小程序PHP+Uniapp

旅游门票预订系统，支持景点门票、导游产品便捷预订、美食打卡、景点分享、旅游笔记分享等综合系统更新日志 V1.3.0 1、修复富文本标签 2、新增景点入驻【高级版本】3、新增门票核销【高级版】4、新增门票端口【高级版】...

编程日记 2025/5/24 6:16:04

Windows 与 Linux 下 Ping IPv6 地址 | 常用网络命令

注：本文为网络命令相关文章合辑。未整理去重。一、IPv6 概述 IPv6 即 “Internet 协议版本 6”，因 IPv4 地址资源面临耗尽问题而被引入以替代 IPv4。IPv6 则提供了理论上多达 2 128 2^{128} 2128 个地址，有效解决地址不足困境。 IPv6 具…...

编程日记 2025/5/30 15:13:46

前端学习一

一进程与线程线程是进程执行的最小单位，进程是系统分配任务的最小单位。一个进程可执行最少一个线程。线程分为子线程和主线程。主线程关闭则子线程关闭。二浏览器进程浏览器是多进程多线程应用。进程包括： 浏览器进程负责程序交互渲染…...

编程日记 2025/6/3 4:30:45

【Python · PyTorch】卷积神经网络（基础概念）

【Python PyTorch】卷积神经网络 CNN（基础概念） 0. 生物学相似性1. 概念1.1 定义1.2 优势1.2.1 权重共享1.2.2 局部连接1.2.3 层次结构 1.3 结构1.4 数据预处理1.4.1 标签编码① One-Hot编码 / 独热编码② Word Embedding / 词嵌入 1.4.2 归一化① Min-…...

编程日记 2025/6/19 20:53:48

Spring Framework 路径遍历漏洞复现（CVE-2024-38819）

hu0x01 产品描述： Spring Framework 是一个功能强大的 Java 应用程序框架，旨在提供高效且可扩展的开发环境。它结合了轻量级的容器和依赖注入功能，提供了一种使用 POJO 进行容器配置和面向切面的编程的简单方法，以及一组用于AOP的模块。0x02 漏洞描述： Spring Framework 存…...

编程日记 2025/6/20 10:37:31

心法利器[122] | 算法面试的八股和非八股讨论

心法利器本栏目主要和大家一起讨论近期自己学习的心得和体会。具体介绍：仓颉专项：飞机大炮我都会，利器心法我还有。 2023年新的文章合集已经发布，获取方式看这里：又添十万字-CS的陋室2023年文章合集来袭，更…...

编程日记 2025/5/29 22:40:26

实操给自助触摸一体机接入大模型语音交互

本文以CSK6 大模型开发板串口触摸屏为例，实操讲解触摸一体机怎样快速增加大模型语音交互功能，使用户能够通过语音在一体机上查询信息、获取智能回答及实现更多互动功能等。在本文方案中通过CSK6大模型语音开发板采集用户语音，将语音数据传输…...

编程日记 2025/6/4 2:33:29

AJAX家政系统自营+多商家家政系统服务小程序PHP+Uniapp

一款同城预约、上门服务、到店核销家政系统，用户端、服务端、门店端各端相互依赖又相互独立，支持选择项目、选择服务人员、选择门店多种下单方式，支持上门服务和到店核销两种服务方式，支持自营和多商家联营两种运营模式&#xff0…...

编程日记 2025/5/29 14:53:10

LiveData源码研究

LiveData 源码分析前言用过MVVM的大概知道LiveData可以感知组件的生命周期，当页面活跃时，更新页面数据， 当页面处于非活跃状态，它又会暂停更新，还能自动注册和注销观测者，能有效避免内存泄漏和不必要的…...

编程日记 2025/6/19 22:28:39

Root软件学习

一、命令行输入下方命令打开root文件 root filename.root 二、在root命令行下输入.help查看root下可用的指令 .help输入.q是退出root命令行 .q 三、输入下方指令查看当前打开的root文件的目录 .ls 四、打印Hits树下的内容（print） 方框里是各种树文…...

编程日记 2025/5/28 3:46:26

研发文档管理系统：国内外9大选择比较

文章主要对比了9款国内外研发文档管理系统：1.PingCode； 2. Worktile； 3. 飞书； 4. 石墨文档； 5. 腾讯文档； 6. 蓝湖； 7. Confluence； 8. Notion； 9. Slab。在企业研发过…...

编程日记 2025/5/31 10:57:54