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

Vue 3中如何封装API请求：提升开发效率的最佳实践

news 来源：原创 2025/7/5 11:42:12

在现代前端开发中，API请求是不可避免的一部分，尤其是与后端交互时。随着Vue 3的广泛应用，如何高效地封装API请求，既能提升代码的可维护性，又能确保代码的高复用性，成为了很多开发者关注的话题。

在本文中，我将详细讲解如何在Vue 3项目中封装API请求，让你在实现功能时更加高效，代码更清晰，也能提升项目的可维护性和扩展性。

为什么要封装API请求？

代码复用性：封装后的API请求可以在整个项目中复用，避免了多次写相同的请求代码。
易于维护：API接口可能会发生变动，封装API请求后，只需要修改一个地方，避免了每个请求都修改。
统一处理错误和响应：可以集中处理所有请求的错误，统一格式化API的响应数据。
便于调试和扩展：当项目需要集成新的API或进行调试时，封装后的代码更容易进行修改和调试。

1. Vue 3项目结构

首先，我们需要了解一下Vue 3的项目结构，以便合理地封装API。假设我们的项目目录如下：

src/
│
├── assets/
├── components/
├── views/
├── api/            // 存放API封装代码的目录
├── store/
├── router/
├── App.vue
└── main.js

2. 安装axios

为了向API发送请求，我们通常会使用axios这个库，它是一个基于Promise的HTTP客户端，支持浏览器和Node.js。我们可以通过npm或yarn来安装axios。

npm install axios

3. 创建API封装模块

在src/api目录下，创建一个api.js文件，并在其中进行API封装。

// src/api/api.jsimport axios from 'axios';const apiClient = axios.create({baseURL: 'https://api.example.com/', // API的基础URLtimeout: 10000, // 设置请求超时时间headers: {'Content-Type': 'application/json',},
});// 请求拦截器：在发送请求之前做一些处理
apiClient.interceptors.request.use((config) => {// 可以在这里设置token或其他请求头const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器：处理响应数据，统一格式化响应
apiClient.interceptors.response.use((response) => {return response.data; // 返回响应的data部分},(error) => {// 处理请求错误console.error('API请求错误', error);return Promise.reject(error);}
);export default apiClient;

4. 封装API请求

我们可以将不同的API接口封装成函数，便于调用。例如，假设我们有一个获取用户信息和更新用户信息的接口：

// src/api/user.js
import apiClient from './api';// 获取用户信息
export const getUserInfo = () => {return apiClient.get('user/info');
};// 更新用户信息
export const updateUserInfo = (data) => {return apiClient.put('user/update', data);
};

5. 在Vue组件中调用API

接下来，我们可以在Vue组件中调用这些封装好的API函数。比如在一个用户信息的组件中：

<template><div><h1>用户信息</h1><div v-if="userInfo"><p>姓名: {{ userInfo.name }}</p><p>邮箱: {{ userInfo.email }}</p></div><div v-else><p>加载中...</p></div></div>
</template><script>
import { getUserInfo } from '@/api/user';export default {data() {return {userInfo: null,};},async created() {try {const data = await getUserInfo();this.userInfo = data;} catch (error) {console.error('获取用户信息失败', error);}},
};
</script>

6. 错误处理与全局错误提示

为了提升用户体验，我们通常需要在请求失败时进行友好的错误提示。你可以在API封装的response拦截器中，针对不同的错误码显示相应的提示信息。

例如：

// src/api/api.jsimport { ElMessage } from 'element-plus'; // 使用Element Plus的消息提示apiClient.interceptors.response.use((response) => {return response.data;},(error) => {const response = error.response;if (response && response.status) {switch (response.status) {case 401:ElMessage.error('未授权，请登录');break;case 500:ElMessage.error('服务器错误，请稍后再试');break;default:ElMessage.error('请求失败，请稍后再试');}} else {ElMessage.error('网络连接错误');}return Promise.reject(error);}
);

7. 总结

通过上述的封装，我们可以大大提高项目的可维护性和扩展性。API封装不仅让我们的代码更简洁，而且通过集中管理请求和响应，我们可以更轻松地处理跨多个组件的API调用，并且能够统一管理错误和响应格式。进一步优化你的代码结构和处理逻辑，你将能够更加专注于业务逻辑的实现，而不是每次都在重复写请求代码。

封装API请求只是现代前端开发的一小步，但它将带来更好的代码结构和开发效率。如果你习惯了这种封装方式，未来遇到更多的API请求时，你将能够更加游刃有余地进行开发。

8. 进阶：如何处理分页、缓存与防抖

如果你对封装API请求已经有了更高的要求，接下来可以考虑引入一些进阶技术，如分页请求、API缓存、请求防抖等。根据项目需求灵活使用这些技术，可以让你的API封装更加强大。

这篇博客提供了一个详细的Vue 3 API封装方法，希望对你有所帮助。通过封装API请求，你将能够提升开发效率和代码质量，减少重复劳动。如果你有任何问题或建议，欢迎在评论区留言讨论！

Vue 3中如何封装API请求：提升开发效率的最佳实践

在现代前端开发中，API请求是不可避免的一部分，尤其是与后端交互时。随着Vue 3的广泛应用，如何高效地封装API请求，既能提升代码的可维护性，又能确保代码的高复用性，成为了很多开发者关注的话题。在本文中&…...

编程日记 2025/7/5 11:42:12

【Redis】redis主从哨兵

Redis 主从复制在访问量极高的场景下，单台 Redis 已难以承载所有请求，且单点故障风险高。通过主从复制，可以实现读写分离、数据备份与高可用。概念主节点（Master）：负责写操作，将数据变更同…...

编程日记 2025/6/29 10:50:44

16.第二阶段x64游戏实战-分析二叉树结构

免责声明：内容仅供学习参考，请合法利用知识，禁止进行违法犯罪活动！ 本次游戏没法给内容参考于：微尘网络安全上一个内容：15.第二阶段x64游戏实战-分析怪物血量（遍历周围） 首先通…...

编程日记 2025/7/5 10:46:15

vue | 不同 vue 版本对复杂泛型的支持情况 · vue3.2 VS vue3.5

省流总结：defineProps 的泛型能力，来直接推导第三方组件的 props 类型引入第三方库的类型，并直接在 <script setup> 中作为 props 使用。这种类型一般是复杂泛型（包含联合类型、可选属性、交叉类型、条件类型等&#xff0…...

编程日记 2025/6/29 10:02:37

OpenGL学习笔记（Blinn-Phong、伽马矫正、阴影）

目录 Blinn-PhongGamma矫正GammaGamma矫正实现方法sRGB纹理衰减阴影shadow mapping渲染阴影改进阴影贴图PCF GitHub主页：https://github.com/sdpyy1 OpenGL学习仓库:https://github.com/sdpyy1/CppLearn/tree/main/OpenGLtree/main/OpenGL):https://github.com/sdp…...

编程日记 2025/7/4 5:48:21

GPLT-2025年第十届团体程序设计天梯赛总决赛题解(2025天梯赛题解,266分)

今天偶然发现天梯赛的代码还保存着，于是决定写下这篇题解，也算是复盘一下了 L1本来是打算写的稳妥点，最后在L1-6又想省时间，又忘记了insert，replace这些方法怎么用，也不想花时间写一个文件测试&#xff0c…...

编程日记 2025/6/29 10:29:13

day4 pandas学习

%pip install openxyxl 找一个自己觉得有意思的文件。我找的是成绩单来玩。这节学的比较耗时了，大概用了60分钟。 import pandas as pd data2 pd.read_csv(rD:\python代码区\代码随想录挑战-调试区\python训练营\1_计算类专业分流学生成绩排名.csv) #print(data)…...

编程日记 2025/6/29 10:03:12

【Java学习笔记】循环结构

循环结构一、for循环 for循环结构 for(循环变量初始化;循环条件;循环变量迭代){循环操作（可以多条语句） }for循环写死循环 for(;;){语句 }注意点：循环变量的初始化在for语句内，属于是局部变量，在全局中会出现未定义…...

编程日记 2025/6/29 9:23:21

URP-UGUI交互功能实现

一、非代码层面实现交互（SetActive） Button ：在OnClick（）中添加SetActive方法（但是此时只首次有效） Toggle ：在OnClick（）中添加动态的SetActive方法 &#…...

编程日记 2025/6/29 12:22:28

08-IDEA企业开发工具-集成AI插件通义灵码

需要登陆才可使用！！！ 1. 安装AI编程插件找到插件: 在IDEA的设置中，找到插件（Plugins）部分。安装插件: 搜索“通义灵码”，找到后点击安装（Install），接受条款…...

编程日记 2025/6/29 10:23:51

解决报错：this[kHandle] = new _Hash(algorithm, xofLen)；

前端项目编译报错： node:internal/crypto/hash:68this[kHandle] new _Hash(algorithm, xofLen);^Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:68:19)at Object.createHash (node:crypto:138:10)at modu…...

编程日记 2025/6/29 10:14:43

使用 Streamlit 打造一个简单的照片墙应用

在现代 web 开发中，快速构建交互式应用是一项重要的技能。Streamlit 是一个强大的 Python 库，允许开发者以最小的代码量创建美观且功能丰富的 web 应用。今天，我们将通过分析一段简单的 Streamlit 代码，展示如何构建一个照片墙应用…...

编程日记 2025/6/29 9:23:19

深度学习优化器和调度器的选择和推荐

一、常用优化器对比 1. 随机梯度下降（SGD） 原理：每次迭代使用小批量数据计算梯度并更新参数。优点：实现简单，适合大规模数据集。缺点：收敛速度慢，容易陷入局部最优或鞍点。适用场景&#xff1…...

编程日记 2025/6/29 11:39:14

“时间”，在数据处理中的真身——弼马温一般『无所不能』（DeepSeek）

电子表格时间处理真理：数值存储最瘦身，真身闯关通四海。笔记模板由python脚本于2025-04-23 22:25:59创建，本篇笔记适合喜欢在电子表格中探求时间格式的coder翻阅。【学习的细节是欢悦的历程】博客的核心价值：在于输出思考与经验…...

编程日记 2025/6/29 1:38:54

为什么Spring中@Bean注解默认创建单例Bean

在Spring框架中，使用Bean注解定义的对象默认确实是单例的，这是由Spring容器的设计哲学和实际需求决定的。下面我从多个角度解释这一设计选择的原因和机制。 1. Spring Bean作用域基础 Spring定义了多种Bean作用域，其中默认是单例(Singleton…...

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

GPLT-2025年第十届团体程序设计天梯赛总决赛题解(2025天梯赛题解，共计266分)

编程日记 2025/7/5 11:23:56

JDK（Ubuntu 18.04.6 LTS）安装笔记

一、前言本文与【MySQL 8（Ubuntu 18.04.6 LTS）安装笔记】同批次：先搭建数据库，再安装JDK，后面肯定就是部署Web应用：典型的单机部署。“麻雀虽小五脏俱全”，善始善终，还是记下来吧。…...

编程日记 2025/6/28 18:24:22

Java 拦截器完全指南：原理、实战与最佳实践

一、引言拦截器的基本概念在现代 Java Web 开发中，拦截器（Interceptor）是一种用于在请求处理前后插入自定义逻辑的机制。简单来说，它是一种“横切逻辑处理器”，可以用来对请求进行预处理、后处理，甚至终…...

编程日记 2025/7/5 11:31:23

2025.04.23华为机考第二题-200分

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 02. 魔法彩灯森林问题描述在卢小姐的魔法花园中，有一棵神奇的彩灯树。这棵树的每个节点都装有一盏魔法灯，灯有三种颜色状态：红色（用数字1表示）、绿色（用数字2表示）和蓝色（…...

编程日记 2025/6/28 21:46:24

【Leetcode 每日一题】1399. 统计最大组的数目

问题背景给你一个整数 n n n。请你先求出从 1 1 1 到 n n n 的每个整数 10 10 10 进制表示下的数位和（每一位上的数字相加），然后把数位和相等的数字放到同一个组中。请你统计每个组中的数字数目，并返回数字数目并列最多的组…...

编程日记 2025/6/29 0:05:26

系统重装——联想sharkbay主板电脑

上周给一台老电脑重装系统系统，型号是lenovo sharkbay主板的电脑，趁着最近固态便宜，入手了两块长城的固态，装上以后插上启动U盘，死活进不去boot系统。提示 bootmgr 缺失，上网查了许久，终于解决了…...

编程日记 2025/6/28 23:17:58

Python数据清洗笔记（上）

一、数据清洗概述数据清洗是数据分析过程中至关重要的一步，约占整个数据分析过程的60%-80%的时间。主要包括处理缺失值、异常值、重复值、格式不一致等问题。二、常用工具主要使用Python的Pandas库进行数据清洗： import pandas as pd import nump…...

编程日记 2025/6/29 11:53:11

三、Python编程基础03

目录一、debug 调试的使用1. 打断点2. 右键 Debug 运行代码3. 单步执行代码,查看过程二、字符串1、定义与下标引用2、切片3、查找4、去除空白字符5、转换大小写与拆分6、其他方法-替换、连接、是否为纯数字7、登录案例优化三、列表 list1、列表基础操作2、案例： …...

编程日记 2025/6/29 12:14:07

西门子S7-200SMART 控制Profinet闭环步进MD-4250-PN (1)电机及专栏介绍

一、前言本系列是我继《西门子S7-1200PLC 控制步进电机 MD-4240-PN》系列专栏后，新开的一篇专栏。系列的主题围绕 S7-200SMART Profinet闭环步进(MD-4250-PN) 触摸屏的硬件，预计作四篇文章，分别为：专栏介绍、硬件介绍、PLC…...

编程日记 2025/6/29 11:54:41

NoSQL 简单讲解

目录 1. NoSQL 的背景与意义 1.1 数据库的演变 1.2 NoSQL 的兴起 2. NoSQL 数据库的分类 2.1 键值存储（Key-Value Stores） 2.2 文档数据库（Document Stores） 2.3 列族存储（Column-Family Stores） 2.…...

编程日记 2025/6/29 1:40:31

TCP 协议：原理、机制与应用

一、引言在当今数字化的时代，网络通信无处不在，而 TCP（Transmission Control Protocol，传输控制协议）作为互联网协议栈中的核心协议之一，扮演着至关重要的角色。无论是浏览网页、发送电子邮件还是进行文件…...

编程日记 2025/6/29 10:22:34

C++23 新特性：令声明顺序决定非静态类数据成员的布局 (P1847R4)

文章目录引言背景知识非静态类数据成员类的内存布局 P1847R4提案内容示例代码影响和优势提高代码的可预测性与其他语言和库的交互更加方便简化代码调试和优化编译器支持情况实际应用场景嵌入式系统开发跨语言编程内存优化总结引言在C的发展历程中，每一个新版…...

编程日记 2025/6/29 10:07:12

Java 环境配置详解（Windows、macOS、Linux）

Java 环境配置是学习和开发 Java 程序的第一步，也是至关重要的一步。一个正确配置的 Java 环境能够保证你的 Java 程序能够顺利编译、运行和调试。本文将详细介绍在 Windows、macOS 和 Linux 三种主流操作系统上配置 Java 环境的步骤，力求详尽、易懂&…...

编程日记 2025/6/29 5:36:03

ChatBEV：一种理解 BEV 地图的可视化语言模型

25年3月来自上海交大、上海AI实验室、同济大学和MAGIC的论文“ChatBEV: A Visual Language Model that Understands BEV Maps”。交通场景理解对于智能交通系统和自动驾驶至关重要，可确保车辆安全高效地运行。虽然 VLM 的最新进展已显示出整体场景理解的前景&…...

编程日记 2025/7/5 11:25:17

利用Python爬虫实现百度图片搜索的PNG图片下载

在图像识别、训练数据集构建等场景中，我们经常需要从互联网上批量下载图片素材。百度图片是中文搜索中最常用的来源之一。本文将介绍如何使用Python构建一个稳定、可扩展的百度图片爬虫，专门用于下载并保存高清PNG格式图片。一、项目目标本项目的目标…...

编程日记 2025/6/29 10:32:43

自主可控鸿道Intewell工业实时操作系统

鸿道Intewell工业实时操作系统是东土科技旗下科东软件自主研发的新一代智能工业操作系统，以下是相关介绍： 系统架构 -Intewell-C全实时构型：设备上只运行自研RTOS的全实时系统，适用于有功能安全认证需求的实时控制场景&#xf…...

编程日记 2025/7/5 10:52:05

【数据结构入门训练DAY-21】信息学奥赛一本通T1334-围圈报数

文章目录前言一、题目二、解题思路结语前言本次训练内容 STL库中队列的使用练习。训练解题思维一、题目有ｎ个人依次围成一圈，从第１个人开始报数，数到第ｍ个人出列，然后从出列的下一个人开始报数&am…...

编程日记 2025/6/29 11:10:10

【C语言】C语言中的字符函数和字符串函数全解析

前言在C语言编程中，字符和字符串的处理是必不可少的。C语言标准库提供了丰富的字符和字符串函数，这些函数极大地简化了字符和字符串的操作。本文将详细介绍这些函数的使用方法、模拟实现以及一些实用的代码示例，帮助你更好地理解和掌握它们…...

编程日记 2025/6/29 11:27:41

声纹振动传感器在电力监测领域的应用

声纹振动传感器在电力监测领域有多种应用，主要包括以下几个方面： 变压器监测故障诊断：变压器在运行过程中会产生特定的声纹和振动信号，当变压器内部出现故障，如绕组短路、铁芯松动、局部放电等，其声纹和振…...

编程日记 2025/7/5 4:53:52

配色之道：解码产品设计中的UI设计配色艺术

在数字化时代，用户界面（UI）作为产品与用户交互的桥梁，其设计质量直接影响着用户体验与产品成败。而配色，作为UI设计中最为直观且富有表现力的元素之一，不仅是视觉美学的体现，更是情感传递、信息…...

编程日记 2025/7/3 6:45:22

python基础语法测试

1. 关于Python语言数值操作符，以下选项中描述错误的是 A x%y表示x与y之商的余数，也称为模运算 B x/y表示x与y之商 C x**y表示x的y次幂，其中，y必须是整数 D x//y表示x与y之整数商，即不大于x与y之商的最大整数2. 下面代码…...

编程日记 2025/7/5 3:55:44

如何安装Visio（win10）

首先下载下面这些文件 HomeStudent2021Retail.img officedeploymenttool_17531-20046.exe office中文语言包.exe 确保这些文件都在一个文件夹内（我已经上传这些资源，这些资源都是官网下载的） 官网资源下载教程 1.下载Office镜像&#xff0…...

编程日记 2025/7/5 9:46:15

Sql刷题日志（day5）

面试： 1、从数据分析角度，推荐模块怎么用指标衡量？ 推荐模块主要目的是将用户进行转化，所以其主指标是推荐的转化率推荐模块的指标一般都通过埋点去收集用户的行为并完成相应的计算而形成相应的指标数据，而这里的驱动…...

编程日记 2025/6/29 11:21:34

.NET、java、python语言连接SAP系统的方法

💡 本文会带给你可用哪些技术与Sap系统连接怎样用Rfc技术连接SAP一. SAP系统与外部系统集成技术 SAP系统提供了多种方式供Java、.NET、Python等外部编程语言进行连接和集成。 1. RFC (Remote Function Call) 连接适用语言：Java, .NET, Python, 其他支持RFC的编程语言 …...

编程日记 2025/7/2 16:18:34

C++ 容器查找效率

C 容器查找效率只要选对容器，多写几行代码就能让程序“飞”起来。下面用生活化的比喻足够多的带注释示例，帮你弄懂常用 STL 容器的查找特性。读完你应该能快速判断：“我的场景该用哪一个？” 0. 先把“查找复杂度”聊明白记号…...

编程日记 2025/7/3 6:46:18

汽车可变转向比系统的全面认识

一、什么是转向比？ 转向比又叫转向传动比，是指方向盘转向角度与车轮转向角度之比。例如，方向盘向左转动了60角，而车轮则向左转动了30角，转向比就是2：1。转向比越大，意味着要使车轮转向达到指…...

编程日记 2025/6/29 10:37:02

知识储备-后仿

仿真环境设定 mem、constant input(scan/test)等设非x初值无复位ff通过force-release处理vcs timing_check、optconfigfile (自定义配置，如指定模块timing check与否）设置运行核数、仿真精度不要过小设置、根据测试目的选择性关闭、dump范围(时间/空间)…...

编程日记 2025/6/29 12:07:50

C# AutoResetEvent 详解

一、简介 AutoResetEvent 是 .NET 中一个重要的线程同步原语，用于线程间的信号通知。下面我将从多个方面详细讲解 AutoResetEvent。 AutoResetEvent 是 System.Threading 命名空间下的一个类，它表示一个线程同步事件，在等待线程被释放后会自…...

编程日记 2025/6/29 10:37:10

【水印图片文字识别】水印相机拍摄的照片提取重要的信息可以批量改名，批量识别水印文字内容批量给图片改名，基于QT和腾讯OCR的识别方案

应用场景在日常工作和生活中，人们使用水印相机拍摄的照片往往包含重要的信息，如拍摄地点、时间、事件等。这些信息以水印的形式存在于照片中。当需要对大量照片进行管理时，手动为每张照片重命名是一项繁琐且容易出错的工作。通过批量识别水印文字内容并为图片改名，可以提…...

编程日记 2025/7/5 5:42:15

【架构】Armstrong公理系统通俗详解：数据库设计的基本法则

关系数据库就像一本精心设计的通讯录，而Armstrong公理系统则是帮我们整理这本通讯录的基本规则。本文将用简单易懂的语言和生活实例，带你理解这套看似复杂的理论。 1. 什么是函数依赖？ 想象你有一个学生信息表，包含学号、姓名、…...

编程日记 2025/6/30 20:10:48

Redis高频核心面试题

1.阐述Redis的主要的特性和优势 ？ 【Redis 的主要特性】 （1）Redis 是完全开源免费的，遵守 BSD 协议，是一个高性能的 key-value 数据库 （2）Redis 与其他 key - value 缓存产品有以下三个特点&a…...

编程日记 2025/7/2 8:26:09

Vue3-原始值的响应式方案ref

一、原始类型的值原始类型的指的是: boolean、number、string、symbol、undefind和null等类型的值. 一、初识ref 为什么vue3需要对原始值的响应式做单独处理?因为Javascript中的Proxy只能代理对象类型的数据, 如普通对象、数组、Set、Map等。为了解决Proxy不能代理原始类…...

编程日记 2025/7/2 10:02:10

VUE的创建

Vue Vue的创建脚手架创建Vue的解析setup函数:插值表达式数据响应式⽬录和⽂件解读指令 Vue的创建下载VScode https://code.visualstudio.com/download 加入拓展包点击然后输入代码 <!DOCTYPE html> <html lang"en"><head><meta charset&…...

编程日记 2025/7/5 8:58:28

第51讲：AI在农业政策支持系统中的应用——用人工智能点亮科学决策的新范式

目录 🧠 开篇引导：农业决策，如何更科学？ 🤖 什么是“AI驱动的农业政策支持系统”？ 🧪 案例解析：AI如何助力农业政策？ 🌾 案例一：政策补贴的智能匹配 🌍 案例二：土地利用规划支持 🛠 AI在农业政策建模中的常用技术 📈 可视化与接口建议 🌟 未来…...

编程日记 2025/6/29 11:36:32

开关电源LM5160-Q1 在 Fly-Buck 电路中的硬件设计与 PCB Layout 优化

一、LM5160-Q1 规格书深度解读与硬件设计参数提取核心功能宽输入范围：4.5V~65V，支持汽车级输入电压波动（AEC-Q100 标准，温度等级 1：-40C~125C）。集成度：内置高侧 / 低侧 MOSFET，无需外部肖特基二极管，同步降压 / Fly-Buck 双模式。控制架构：自适应恒定导通时间…...

编程日记 2025/7/2 3:07:06