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

基于TypeScript封装 `axios` 请求工具详解

news 来源：原创 2025/6/10 11:58:41

TypeScript 项目中，封装一个详细的 axios 请求工具可以提高代码的可维护性、可重用性，并让请求逻辑与业务逻辑分离。以下是一个详细的封装示例，包括请求拦截器、响应拦截器、错误处理、以及类型定义。

1. 安装 Axios

首先，确保你已安装 axios 和 axios 类型定义。

npm install axios
npm install --save-dev @types/axios

2. 封装 Axios 请求工具

在项目中创建一个新的文件 src/utils/axios.ts 来封装所有请求相关的逻辑。

// src/utils/axios.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';// 定义通用的返回数据结构
interface ApiResponse<T = any> {code: number;message: string;data: T;
}class AxiosRequest {private axiosInstance: AxiosInstance;constructor() {this.axiosInstance = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,  // 基础URL，可以在环境变量中配置timeout: 5000, // 请求超时headers: {'Content-Type': 'application/json',},});// 请求拦截器this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {// 可以在请求前做一些操作，例如加入 tokenconst token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},(error: AxiosError) => {return Promise.reject(error);});// 响应拦截器this.axiosInstance.interceptors.response.use((response: AxiosResponse<ApiResponse>) => {// 可以处理一些通用的响应数据const { code, message, data } = response.data;if (code === 0) {return data;  // 返回正常数据} else {// 根据不同的 `code` 进行错误处理return Promise.reject(new Error(message || '未知错误'));}},(error: AxiosError) => {// 统一错误处理let errorMessage = '请求失败';if (error.response) {errorMessage = error.response.data.message || '服务器异常';} else if (error.request) {errorMessage = '网络异常';} else {errorMessage = error.message;}return Promise.reject(new Error(errorMessage));});}// 封装 GET 请求public get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {return this.axiosInstance.get<ApiResponse<T>>(url, config).then((response) => response);}// 封装 POST 请求public post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {return this.axiosInstance.post<ApiResponse<T>>(url, data, config).then((response) => response);}// 封装 PUT 请求public put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {return this.axiosInstance.put<ApiResponse<T>>(url, data, config).then((response) => response);}// 封装 DELETE 请求public delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {return this.axiosInstance.delete<ApiResponse<T>>(url, config).then((response) => response);}
}// 创建一个 AxiosRequest 实例
const axiosRequest = new AxiosRequest();
export default axiosRequest;

3. 请求使用示例

在 Vue 组件中，可以直接导入并使用封装好的请求工具。

// src/views/Example.vue
<template><div><button @click="fetchData">获取数据</button><div v-if="error" class="error">{{ error }}</div><div v-if="data"><pre>{{ data }}</pre></div></div>
</template><script lang="ts">
import { defineComponent, ref } from 'vue';
import axiosRequest from '@/utils/axios';export default defineComponent({name: 'Example',setup() {const data = ref<any>(null);const error = ref<string>('');const fetchData = async () => {try {const response = await axiosRequest.get('/api/endpoint');  // 调用 GET 请求data.value = response;} catch (err) {error.value = (err as Error).message;}};return {data,error,fetchData,};},
});
</script><style scoped>
.error {color: red;
}
</style>

4. 配置环境变量

确保在 .env 文件中配置基础的 API URL：

VITE_API_BASE_URL=https://your-api-url.com

5. 代码解释

请求拦截器：在请求发送之前，可以为请求添加授权信息（如 token）。也可以处理其他全局请求配置。
响应拦截器：所有的响应数据都会经过拦截器处理，统一检查返回的 code，如果为 0 表示成功，否则会抛出错误。
错误处理：无论是请求错误还是响应错误，都会被统一捕获并返回可读的错误信息。
请求方法封装：提供了 GET、POST、PUT 和 DELETE 方法封装，可以在不同的接口请求中使用。

通过这种方式，你的 Axios 请求将更加模块化、易于维护，并且在遇到问题时能够快速定位和处理错误。

基于TypeScript封装 `axios` 请求工具详解

TypeScript 项目中，封装一个详细的 axios 请求工具可以提高代码的可维护性、可重用性，并让请求逻辑与业务逻辑分离。以下是一个详细的封装示例，包括请求拦截器、响应拦截器、错误处理、以及类型定义。 1. 安装 Axios 首先，确保你…...

编程日记 2025/6/4 9:18:27

ElasticSearch在Windows环境搭建测试

引子也持续关注大数据相关内容一段时间，大数据内容很多。想了下还是从目前项目需求侧出发，进行相关学习。Elasticsearch（ES）是位于 Elastic Stack（ELK stack） 核心的分布式搜索和分析引擎。Logstash 和 B…...

编程日记 2025/6/4 16:44:25

通信与网络安全管理之ISO七层模型与TCP/IP模型

一.ISO参考模型 OSI七层模型一般指开放系统互连参考模型 (Open System Interconnect 简称OSI）是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型，为开放式互连信息系统提供了一种功能结构的框架。它从低到高分别是…...

编程日记 2025/6/1 2:17:13

高级运维：shell练习2

1、需求：判断192.168.1.0/24网络中，当前在线的ip有哪些，并编写脚本打印出来。 vim check.sh #!/bin/bash# 定义网络前缀 network_prefix"192.168.1"# 循环遍历1-254的IP for i in {1..254}; do# 构造完整的IP地址ip"$network_…...

编程日记 2025/6/2 22:17:25

三相无刷电机控制｜FOC理论04 - 克拉克变换 + 帕克变换的最终目标

导言通过坐标系旋转，将电机中复杂的三相交流信号映射到与转子磁场同步的旋转参考系中，将动态问题转化为静态问题。这种方法的优点在于： 简化了控制逻辑。实现了转矩Iq和磁通Id的解耦。提供了直流量控制的可能性，大大提高了控制效…...

编程日记 2025/6/4 6:50:49

SAP FICO资产模块各元素基本关系总结

文章目录【SAP系统研究】 #SAP #FICO #资产会计 ①：每个折旧表包含多个折旧范围，折旧范围用于设置资产的平行折旧，如不同的折旧范围可以更新不同的总账，更新不同的科目等。 ②：折旧表是要分配给公司代码的&#xff…...

编程日记 2025/6/2 22:04:22

Elasticsearch快速入门

Elasticsearch是由elastic公司开发的一套搜索引擎技术，它是elastic技术栈中的一部分,提供核心的数据存储、搜索、分析功能 elasticsearch之所以有如此高性能的搜索表现，正是得益于底层的倒排索引技术。那么什么是倒排索引呢？ Elasticsearch…...

编程日记 2025/6/2 15:28:27

【Java数据结构】二叉树相关算法

第一题：获取二叉树中结点个数得到二叉树结点个数，如果结点为空则返回0，然后再用递归计算左树结点个数根结点（1个）右树结点个数。 public int nodeSize(Node root){if (root null)return 0;return nodeSize1(root.l…...

编程日记 2025/6/2 5:59:57

30分钟内搭建一个全能轻量级springboot 3.4 + 脚手架＜1＞ 5分钟快速创建一个springboot web项目

快速导航 <1> 5分钟快速创建一个springboot web项目 <2> 5分钟集成好最新版本的开源swagger ui，并使用ui操作调用接口 <3> 5分钟集成好druid并使用druid自带监控工具监控sql请求 <4> 5分钟集成好mybatisplus并使用mybatisplus generator自…...

编程日记 2025/5/27 7:09:59

vue3学习日记6 - Layout

最近发现职场前端用的框架大多为vue，所以最近也跟着黑马程序员vue3的课程进行学习，以下是我的学习记录视频网址： Day2-17.Layout-Pinia优化重复请求_哔哩哔哩_bilibili 学习日记： vue3学习日记1 - 环境搭建-CSDN博客 vue3学…...

编程日记 2025/6/2 22:17:08

1/14 C++

练习：将图形类的获取周长和获取面积函数设置成虚函数，完成多态再定义一个全局函数，能够在该函数中实现：无论传递任何图形，都可以输出传递的图形的周长和面积 #include <iostream>using namespace std; class Sh…...

编程日记 2025/5/29 21:08:13

【Uniapp-Vue3】页面生命周期onLoad和onReady

一、onLoad函数 onLoad在页面载入时触发，多用于页面跳转时进行参数传递。我们在跳转的时候传递参数name和age: 接受参数： import {onLoad} from "dcloudio/uni-app"; onLoad((e)>{...}) 二、onReady函数页面生命周期函数中的onReady其…...

编程日记 2025/6/2 10:36:35

使用 configparser 读取 INI 配置文件适合于读取 .ini 格式的配置文件。配置文件示例 (config.ini): [DEFAULT] host localhost port 3306 [database] user admin password secret import configparser# 创建配置解析器 config configparser.ConfigParser()# 读取配…...

编程日记 2025/6/2 21:50:07

类模板的使用方法

目录类模板的使用方法 1.类模板语法 2.类模板和函数模板区别 3.类模板中成员函数创建时机 4.类函数对象做函数参数 5.类模板和继承 6.类模板成员函数类外实现 7.类模板分文件编写 person.hpp 实现cpp文件： 8.类模板与友元 9.类模板案例 MyArray.hpp …...

编程日记 2025/6/3 0:06:16

docker mysql5.7如何设置不区分大小写

环境 docker部署，镜像是5.7，操作系统是centos 操作方式 mysql 配置文件是放在 /etc/mysql/mysql.conf.d/mysqld.cnf， vim /etc/mysql/mysql.conf.d/mysqld.cnf lower_case_table_names1 重启mysql容器验证 SHOW VARIABLES LIKE low…...

编程日记 2025/6/3 0:06:36

Docker与虚拟机的区别及常用指令详解

在现代软件开发中，容器化和虚拟化技术已经成为不可或缺的工具。Docker和虚拟机（VM）是两种常见的技术， 它们都可以帮助开发者在不同的环境中运行应用程序。然而，它们的工作原理和使用场景有很大的不同。本文将详细探讨D…...

编程日记 2025/6/4 15:44:19

C#异步和多线程,Thread,Task和async/await关键字--12

目录一.多线程和异步的区别 1.多线程 2.异步编程多线程和异步的区别二.Thread,Task和async/await关键字的区别 1.Thread 2.Task 3.async/await 三.Thread,Task和async/await关键字的详细对比 1.Thread和Task的详细对比 2.Task 与 async/await 的配合使用 3. asy…...

编程日记 2025/6/4 9:17:27

第一次作业三种方式安装mysql（Windows和linux下）作业

在Windows11上安装sever（服务）端和客户端 server端安装打开官网MySQL 进入到主页点击DOWMLOAD 进入下载界面点击下方MySQL Community (GPL) Downloads 进入社区版mysql下载界面点击 MySQL Community Server 进入server端下载选择8.4.3LTS&…...

编程日记 2025/6/2 20:56:43

ubuntu官方软件包网站字体设置

在https://ubuntu.pkgs.org/22.04/ubuntu-universe-amd64/xl2tpd_1.3.16-1_amd64.deb.html搜索找到需要的软件后，点击，下滑， 即可在Links和Download找到相关链接，下载即可， 但是找不到ros的安装包， 字体设…...

编程日记 2025/5/31 20:36:23

深拷贝与浅拷贝

作者简介： 一个平凡而乐于分享的小比特，中南民族大学通信工程专业研究生在读，研究方向无线联邦学习擅长领域：驱动开发，嵌入式软件开发，BSP开发作者主页：一个平凡而乐于分享的小比特的个人主页…...

编程日记 2025/5/31 0:51:21

No one knows regex better than me

No one knows regex better than me 代码分析，传了两个参数zero,first，然后$second对两个所传的参数进行了拼接好比：?zero1&first2 传入后就是: 12 然后对$second进行了正则匹配，匹配所传入的参数是否包含字符串Yeedo|wa…...

编程日记 2025/6/3 7:09:17

scala基础学习(数据类型)-集合

文章目录集合创建集合isEmpty获取数据添加元素删除元素常见方法交集 &差集 diff --并集 unionto stringto listto Arrayto Map其余常用方法集合 Scala Set(集合)是没有重复的对象集合，所有的元素都是唯一的。 Scala 集合分为可变的和不可变的集合。默认情…...

编程日记 2025/6/3 10:05:02

如何使用 Excel 进行多元回归分析？

多元回归分析，一种统计方法，用来探索一个因变量（即结果变量）与多个自变量（即预测变量）之间的关系。广泛用于预测、趋势分析以及因果关系的分析。听起来这个方法很复杂，但其实在 Excel 中可以很…...

编程日记 2025/6/3 14:37:52

思维转换：突破思维桎梏，创造更高效的工作与生活

在现代职场和生活中，我们经常面临着各种挑战和问题，有时候虽然付出了很多努力，但依然难以找到更有效的解决方案。这时，或许我们需要的不是更多的努力，而是一次“思维转换”。这一概念看似简单，但它背后却蕴…...

编程日记 2025/6/3 14:37:04

ClickHouse-CPU、内存参数设置

常见配置 1. CPU资源 1、clickhouse服务端的配置在config.xml文件中 config.xml文件是服务端的配置，在config.xml文件中指向users.xml文件，相关的配置信息实际是在users.xml文件中的。大部分的配置信息在users.xml文件中，如果在users.xml文…...

编程日记 2025/6/3 14:37:36

Spring Boot 项目启动后自动加载系统配置的多种实现方式

Spring Boot 项目启动后自动加载系统配置的多种实现方式在 Spring Boot 项目中，可以通过以下几种方式实现在项目启动完成后自动加载系统配置缓存操作的需求： 1. 使用 CommandLineRunner CommandLineRunner 是一个接口，可以用来在 Spring…...

编程日记 2025/6/3 14:35:56

scrapy库解决ja3/tls指纹验证问题

pip install curl_cffi0.7.4 pip install scrapy-fingerprint0.1.3seetings.py打开中间件 DOWNLOADER_MIDDLEWARES { "scrapy_fingerprint.fingerprintmiddlewares.FingerprintMiddleware": 100 }yield scrapy.Request(urlurl,callbackself.parse) 改为以下 from sc…...

编程日记 2025/6/3 14:36:30

二进制、八进制、十进制和十六进制的相互转换

printf 函数 printf 函数是 C 语言中用于将格式化的数据输出到标准输出（通常是屏幕）的函数。它位于 stdio.h 头文件中，因此在使用之前需要包含该头文件。 printf 函数的格式说明符格式说明符说明示例%d 或 %i输出或输入十进制有符号整数p…...

编程日记 2025/6/3 14:37:21

分布式缓存redis

分布式缓存redis 1 redis单机（单节点）部署缺点 （1）数据丢失问题：redis是内存存储，服务重启可能会丢失数据 （2）并发能力问题：redis单节点（单机）部…...

编程日记 2025/6/3 14:36:13

day08_Kafka

文章目录 day08_Kafka课程笔记一、今日课程内容一、消息队列（了解）**为什么消息队列就像是“数据的快递员”？****实际意义**1、产生背景2、消息队列介绍2.1 常见的消息队列产品2.2 应用场景2.3 消息队列中两种消息模型二、Kafka的基本介绍1、…...

编程日记 2025/6/3 14:36:46

fbx 环境搭建

python 3.7 3.8 版本支持 https://github.com/Shiiho11/FBX-Python-SDK-for-Python3.x 只有python3.7 https://www.autodesk.com/developer-network/platform-technologies/fbx-sdk-2020-3 scipy安装： python安装scipy_scipy1.2.1库怎么安装-CSDN博客 smpl 2 fbx…...

编程日记 2025/6/2 12:51:23

【大数据】机器学习------神经网络模型

一、神经网络模型 1. 基本概念神经网络是一种模拟人类大脑神经元结构的计算模型，由多个神经元（节点）组成，这些节点按照不同层次排列，通常包括输入层、一个或多个隐藏层和输出层。每个神经元接收来自上一层神经元的输…...

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

YOLOv5训练长方形图像详解

文章目录 YOLOv5训练长方形图像详解一、引言二、数据集准备1、创建文件夹结构2、标注图像3、生成标注文件三、配置文件1、创建数据集配置文件2、选择模型配置文件四、训练模型1、修改训练参数2、开始训练五、使用示例1、测试模型2、评估模型六、总结 YOLOv5训练长方形图像详…...

编程日记 2025/6/3 22:13:06

【Vim Masterclass 笔记11】S06L24 + L25：Vim 文本的插入、变更、替换与连接操作同步练习（含点评课）

文章目录 S06L24 Exercise 06 - Inserting, Changing, Replacing, and Joining1 训练目标2 操作指令2.1. 打开 insert-practice.txt 文件2.2. 练习 i 命令2.3. 练习 I 命令2.4. 练习 a 命令2.5. 练习 A 命令2.6. 练习 o 命令2.7. 练习 O 命令2.8. 练习 j 命令2.9. 练习 R 命令2…...

编程日记 2025/6/3 13:38:59

【计算机网络】深入浅出计算机网络

第一章计算机网络在信息时代的作用计算机网络已由一种通信基础设施发展成一种重要的信息服务基础设施 CNNIC 中国互联网网络信息中心因特网概述网络、互联网和因特网网络（Network）由若干结点（Node）和连接这些结点的链路…...

编程日记 2025/6/3 4:03:51

HTTP详解——HTTP基础

HTTP 基本概念 HTTP 是超文本传输协议 (HyperText Transfer Protocol) 超文本传输协议(HyperText Transfer Protocol) HTTP 是一个在计算机世界里专门在两点之间传输文字、图片、音视频等超文本数据的约定和规范 1. 协议约定和规范 2. 传输两点之间传输&#xf…...

编程日记 2025/6/2 5:45:49

ubuntu 安装 python

一、安装python依赖的包。 sudo apt-get install -y make zlib1g zlib1g-dev build-essential libbz2-dev libsqlite3-dev libssl-dev libxslt1-dev libffi-dev openssl python3-tklibsqlite3-dev需要在python安装之前安装，如果用户操作系统已经安装python环境&…...

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

CSS：定位

CSS定位核心知识点详解 CSS定位是网页布局中的重要概念，它允许开发者将元素放置在页面的指定位置。以下是对CSS定位所有相关详细重要知识点的归纳： 为什么要使用定位： 小黄色块在图片上移动，吸引用户的眼球。当我们滚动窗口的…...

编程日记 2025/6/2 22:59:15

ros2笔记-7.1 机器人导航介绍

7.1 机器人导航介绍 7.1.1 同步定位与地图构建想要导航，就是要确定当前位置跟目标位置。确定位置就是定位问题。手机的卫星导航在室内受屏蔽，需要其他传感器获取位置信息。利用6.5 章节的仿真，打开并运行会发现轨迹跟障碍物都被记录…...

编程日记 2025/5/29 18:05:08

一些常见的Java面试题及其答案

Java基础 1. Java中的基本数据类型有哪些？ 答案：Java中的基本数据类型包括整数类型（byte、short、int、long）、浮点类型（float、double）、字符类型（char）和布尔类型（boo…...

编程日记 2025/6/2 21:48:36

今日总结 2025-01-14

学习目标掌握运用 VSCode 开发 uni - app 的配置流程。学会将配置完善的项目作为模板上传至 Git，实现复用。项目启动创建项目：借助 Vue - Cli 方式创建项目，推荐从国内地址 https://gitee.com/dcloud/uni - preset - vue/repository/archiv…...

编程日记 2025/6/1 21:02:51

图像处理|开运算

开运算是图像形态学中的一种基本操作，通常用于去除小的噪声点，同时保留目标物体的整体形状。它结合了腐蚀和膨胀操作，且顺序为先腐蚀后膨胀（先腐蚀后膨胀，胀开了，开运算）。开运算的作用 …...

编程日记 2025/6/2 20:53:13

基于当前最前沿的前端（Vue3 + Vite + Antdv）和后台（Spring boot）实现的低代码开发平台

项目是一个基于当前最前沿的前端技术栈（Vue3 Vite Ant Design Vue，简称Antdv）和后台技术栈（Spring Boot）实现的低代码开发平台。以下是对该项目的详细介绍： 一、项目概述项目名称：lowcode-s…...

编程日记 2025/6/1 9:03:12

ASP.NET Core - 依赖注入(三)

ASP.NET Core - 依赖注入（三） 4. 容器中的服务创建与释放 4. 容器中的服务创建与释放我们使用了 IoC 容器之后，服务实例的创建和销毁的工作就交给了容器去处理，前面也讲到了服务的生命周期，那三种生命周期中对象的创…...

编程日记 2025/6/2 20:54:17

Unity 视频导入unity后，播放时颜色变得很暗很深，是什么原因导致？

视频正常播放时的颜色： 但是，当我在unity下，点击视频播放按钮时，视频的颜色立马变得十分昏暗： 解决办法： 将File—BuildSettings—PlayerSettings—OtherSettings下的Color Space改为：Gamma即可…...

编程日记 2025/6/2 20:54:48

数仓建模（五）选择数仓技术栈：Hive ClickHouse 其它

在大数据技术的飞速发展下，数据仓库（Data Warehouse，简称数仓）成为企业处理和分析海量数据的核心工具。市场上主流数仓技术栈丰富，如Hive、ClickHouse、Druid、Greenplum等，对于初学者而言，选择…...

编程日记 2025/6/2 20:53:45

MySQL主从：如何处理“Got Fatal Error 1236”或 MY-013114 错误（percona译文）

错误的 GTID 如今，典型的复制设置使用 GTID 模式，完整的错误消息可能如下所示： mysql > show replica status\G *************************** 1. row ***************************Replica_IO_Running: NoReplica_SQL_Running: YesLast_I…...

编程日记 2025/6/2 20:54:01

01.14周二F34-Day55打卡

文章目录 1. Jim 在看电视的时候他的老婆正在做饭。（两个动作同时进行）2. 他刚睡着电话就响了。3. 我正在想事情，这时忽然有人从后面抓我胳膊。4. 我们总是边吃火锅边唱歌。5. 他一听说出了事故，马上就来了现场。6. He entered the room until I returned. （英译汉）7.直到…...

编程日记 2025/6/2 17:21:21

Docker 部署 Typecho

1. 官网 https://typecho.org/插件 & 主题 https://github.com/typecho-fans/plugins https://typechx.com/ https://typecho.work/2. 通过 compose 文件安装 github官网： https://github.com/typecho/Dockerfile 新建一个目录，存放 typecho 的相…...

编程日记 2025/6/2 3:12:07

electron 打包后的 exe 文件，运行后是空白窗口

一、代码相关问题 1. 页面加载失败 1.1 原因在 Electron 应用中，若loadFile或loadURL方法指定的页面路径或 URL 错误，就无法正确加载页面，导致窗口空白。 1.2. 解决仔细检查loadFile或loadURL方法中传入的路径或 URL 是否正确&#xf…...

编程日记 2025/6/3 3:33:16

1. 安装 Axios

2. 封装 Axios 请求工具

3. 请求使用示例

4. 配置环境变量

5. 代码解释

相关文章：