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 格式

示例代码：

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

添加请求拦截器（自动携带 Token）

每次发请求前检查本地是否有 token，有则注入到 Authorization 请求头：

立即学习“前端免费学习笔记（深入）”；

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 从 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 requestGet(url: string, params?: any): Promise {
  return service.get(url, { params }).then(res => res.data);
}

export function requestPost(url: string, data?: any): Promise {
  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('/users', { status: 'active' });
const result = await requestPost('/login', form);