# 创建统一的 request.js 封装

URL: https://caijiao.org/axios/wrapper/create-wrapper
Source: docs/axios/wrapper/create-wrapper.md
Description: 本章节讲解如何创建统一的 Axios 封装文件 request.js，实现全局的 baseURL、超时设置、拦截器、错误处理与 Token 管理，提升项目的可维护性与一致性。

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

## 1. 为什么要封装 Axios

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

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

通过封装 Axios，可以统一：

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

## 2. 创建基础封装文件

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

```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. 在组件中使用封装的请求模块

```vue


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

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

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

```js
// 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 });
```

然后在项目中使用：

```js
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`）。

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