# Axios 封装使用说明

本项目已经封装了一个支持代理的 axios 实例，你可以通过以下方式使用：

## 方式一：使用全局注册的 axios 实例（推荐）

```typescript
// 直接使用 - 已在 main.ts 中全局注册
const axios = (window as any).$axios;

// 发送请求
const response = await axios.get('/codet/table.json', {
  params: searchParams
});
```

## 方式二：导入封装的 http 工具

```typescript
import { axios, http, request } from '@/utils/http';

// 使用 axios 实例
const response1 = await axios.get('/api/data');

// 使用便捷的 http 方法
const response2 = await http.get('/api/data');

// 使用项目封装的 request 实例
const { data, error } = await request({ url: '/api/data', method: 'get' });
```

## 方式三：直接导入封装的 axios 实例

```typescript
import axiosInstance from '@/service/request/axios';

const response = await axiosInstance.get('/api/data');
```

## 特性

✅ **自动代理支持**：开发环境下自动使用 Vite 代理配置
✅ **Token 自动注入**：自动添加 Authorization header
✅ **错误处理**：401 错误时自动清除登录状态
✅ **请求/响应拦截**：可以方便地添加全局处理逻辑

## 代理配置

封装的 axios 实例会根据环境变量自动决定是否使用代理：

- 开发环境且 `VITE_HTTP_PROXY=Y` 时：使用代理路径（如 `/proxy-default`）
- 其他情况：直接请求配置的 baseURL

## 配置说明

```typescript
// src/service/request/axios.ts
const axiosInstance = axios.create({
  baseURL, // 根据代理配置自动设置
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});
```

## 迁移建议

如果你之前使用原生 axios，现在可以直接替换：

```typescript
// 之前
import axios from 'axios';
const response = await axios.get('/api/data');

// 现在（方式一）
const axios = (window as any).$axios;
const response = await axios.get('/api/data');

// 现在（方式二）
import { axios } from '@/utils/http';
const response = await axios.get('/api/data');
```

现在所有的 axios 请求都会自动走代理配置，无需每个页面单独配置！
