Vue 3 中优雅调用接口的核心是封装可复用、带 loading/error/data 状态的组合函数 useApi，配合语义化 API 函数与请求/响应拦截器实现解耦、标准化和零样板代码。

在 Vue 3 组合式函数中优雅调用接口，核心是把“请求行为”从组件逻辑中解耦出来，变成可复用、可测试、带状态管理的组合函数。不是简单地 import 一个 axios 实例然后 .get()，而是封装成有 loading、error、data 响应能力的逻辑单元。

定义统一的请求组合函数（useApi）

推荐在 src/composables/useApi.js 中创建通用请求钩子：

• 用 ref 管理 loading、error、data 三个响应式状态
• 提供 execute 方法，接收任意 Axios 请求函数（如 api.getUser）和参数，自动处理加载与错误
• 不绑定具体接口，保持高度复用——同一套 useApi 可用于用户列表、订单详情、上传文件等所有场景

按业务模块组织接口函数（api/user.js）

在 src/api/user.js 中集中定义语义化接口函数，与后端路径解耦：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 每个函数只做一件事：返回一个 Promise（由 axios 调用构成）
• 利用解构传参提升可读性，例如 getUser({ id }) 比 get(`/user/${id}`) 更易维护
• 支持 TypeScript 类型推导（如配合 ApiResponse 接口）

在组件中组合使用，零样板代码

在 .vue 文件中直接导入并调用：

• 调用 useApi() 获取状态与执行器
• 导入具体接口函数（如 from '@/api/user'），传给 execute 即可触发请求
• 无需手动写 try/catch、loading.value = true/false、error 处理——全部由 useApi 内部接管
• 支持多次调用（如分页刷新）、并发控制、取消未完成请求（可选扩展）

进阶：支持自动 Token 注入与响应标准化

确保请求层真正“优雅”，还需两点关键支撑：

• 请求拦截器 自动读取 token 并注入 Authorization 头，避免每个接口重复判断
• 响应拦截器 统一剥离外层包装（如 { code: 200, data: {...}, msg: 'ok' }），只让组件拿到干净的 data
• 对 401/403 等状态码做全局响应（如跳转登录页），不在组件内分散处理

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！