vue 3 中应封装通用 get/post 方法：用 axios.create 创建带 baseurl、timeout、headers 的实例，添加请求拦截器自动携带 token，再导出精简参数、返回 res.data 的 requestget/requestpost 函数。
Vue 3 中封装通用的 GET 和 POST 方法，核心是用 axios.create 创建实例，再配合请求/响应拦截器统一处理逻辑，最后导出语义清晰的函数。不推荐直接使用全局 axios，避免配置污染和维护困难。
创建带基础配置的 Axios 实例
在 src/utils/request.ts（或 .js）中定义实例，集中管理前缀、超时、默认头：
- baseURL 从环境变量读取，便于多环境切换（如开发/测试/生产）
- timeout 设为 5000ms，防接口长时间无响应卡住 UI
-
headers 可预设
Content-Type，POST 默认走 JSON 格式
示例代码：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 5000,
headers: { 'Content-Type': 'application/json' }
});
添加请求拦截器（自动携带 Token）
每次发请求前检查本地是否有 token，有则注入到 Authorization 请求头：
- 从
localStorage或 pinia/store 中取 token - 只对需要鉴权的接口生效（可加白名单逻辑）
- 注意：GET 请求也需携带，否则登录态校验会失败
示例代码：
service.interceptors.request.use(config => {const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
封装通用 GET 与 POST 函数
不直接暴露 service.get()，而是封装成更贴近业务的函数，参数精简、返回值干净：
-
GET：把
params作为第二个参数传入，自动拼接查询字符串 - POST：把数据对象直接作为第二个参数，自动序列化为 JSON
- 统一返回
response.data，省去每次解构
示例代码：
export function requestGetreturn service.get(url, { params }).then(res => res.data);
}
export function requestPost
return service.post(url, data).then(res => res.data);
}
在组件中调用（简洁明了）
按需导入，不用再写重复的配置：
- 获取用户列表：
requestGet('/users', { page: 1, size: 10 }) - 提交表单：
requestPost('/login', { username, password }) - 类型安全：泛型
T可约束返回数据结构，配合 TypeScript 更稳
调用示例：
import { requestGet, requestPost } from '@/utils/request';const list = await requestGet
const result = await requestPost('/login', form);
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
