创建统一的 request.js 封装

在中大型项目中，建议将 Axios 的配置与逻辑集中在一个统一的封装文件中，以便全局维护和统一管理请求行为。

1. 为什么要封装 Axios

在项目开发中，直接在组件中使用 axios.get() 或 axios.post() 容易导致以下问题：

• 不同组件中存在重复的请求逻辑；
• 错误处理方式不统一；
• Token 管理繁琐；
• 接口维护困难。

通过封装 Axios，可以统一：

• 基础配置（baseURL、timeout）；
• 拦截器逻辑；
• 错误提示与 Token 自动注入；
• 响应结构解析。

2. 创建基础封装文件

在 src/utils/request.js 中创建封装文件：

// src/utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
  timeout: 10000,
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const { code, data, message } = response.data;
    if (code !== 0) {
      console.error(`请求失败：${message}`);
      return Promise.reject(new Error(message));
    }
    return data;
  },
  (error) => {
    console.error('网络请求错误：', error.message);
    return Promise.reject(error);
  }
);

export default service;

3. 在组件中使用封装的请求模块

<script setup>
import request from '@/utils/request';

async function getUserInfo() {
  try {
    const data = await request.get('/user/info');
    console.log('用户信息：', data);
  } catch (err) {
    console.error('获取失败：', err.message);
  }
}
</script>

<template>
  <button @click="getUserInfo">获取用户信息</button>
</template>

4. 封装常用请求方法（可选）

你还可以在封装文件中提供统一的请求函数：

// src/utils/request.js
export const get = (url, params) => service.get(url, { params });
export const post = (url, data) => service.post(url, data);
export const put = (url, data) => service.put(url, data);
export const del = (url, params) => service.delete(url, { params });

然后在项目中使用：

import { get, post } from '@/utils/request';

get('/article/list').then(console.log);
post('/user/login', { username: 'admin', password: '123456' });

5. 最佳实践建议

• ✅ 使用 .env 管理不同环境的 baseURL；
• ✅ 在拦截器中统一注入 Token；
• ✅ 统一处理异常逻辑和错误提示；
• ✅ 在大型项目中拆分模块化的 API 文件（如 user.js、article.js）。

这样做可以显著提高代码复用率、减少重复逻辑，让请求逻辑更加规范与可维护。