# 统一请求中转层使用指南

## 概述

`core/request` 是请求中转层，**接口与 `src/utils/request.ts` 完全一致**。

```
应用层（API 模块）
    │
    ▼
┌─────────────────────────────────────┐
│   中转层 core/request                │
│                                     │
│   request()  ← 与 utils/request 接口一致 │
│                                     │
│   • 自动环境检测                     │
│   • 统一请求头管理                   │
│   • Token 管理                      │
└───────────────┬─────────────────────┘
                │
      ┌─────────┴─────────┐
      ▼                   ▼
 ┌────────┐         ┌────────┐
 │ axios  │         │ mxApi  │
 │(已封装) │         │(原生)   │
 └────────┘         └────────┘
```

---

## 核心特性

### 1. 接口完全一致

```typescript
// 原来使用 utils/request
import { request } from '@/utils/request'

// 现在使用 core/request（接口完全一致）
import { request } from '@/core/request'

// 用法完全相同，无需修改任何调用代码
const res = await request<UserInfo>({ url: '/user/1' })
```

### 2. 自动环境检测

- **浏览器环境**：调用 `utils/request`（axios 封装）
- **原生环境**：调用 `core/mxApi`（原生 AJAX）

### 3. 统一请求头

所有请求自动携带：
- `Content-Type: application/json`
- `Authorization: Bearer {token}`（如有）

---

## 使用方式

### Token 管理

```typescript
import { setToken, getToken, clearToken } from '@/core/request'

// 登录后保存 Token
setToken('your-jwt-token')

// 获取 Token
const token = getToken()

// 退出登录
clearToken()
```

### 请求函数

```typescript
import { request } from '@/core/request'

// GET 请求
const user = await request<UserInfo>({ url: '/user/1' })

// POST 请求
const { token } = await request<{ token: string }, LoginParams>({
  url: '/login',
  method: 'POST',
  data: { username: 'admin', password: '123' }
})

// 带查询参数
const users = await request<UserList>({
  url: '/users',
  params: { page: 1, limit: 10 }
})

// 自定义请求头
const res = await request({
  url: '/upload',
  method: 'POST',
  data: formData,
  headers: { 'Content-Type': 'multipart/form-data' }
})
```

---

## API 模块示例

### 用户模块

```typescript
// src/api/user.ts
import { request } from '@/core/request'

interface UserInfo {
  id: number
  username: string
  avatar: string
}

export function getUserInfo(id: number) {
  return request<UserInfo>({ url: `/user/${id}` })
}

export function login(data: { username: string; password: string }) {
  return request<{ token: string }, typeof data>({
    url: '/login',
    method: 'POST',
    data
  })
}

export function updateUser(id: string, data: UpdateUserParams) {
  return request<User, typeof data>({
    url: `/user/${id}`,
    method: 'PUT',
    data
  })
}

export function deleteUser(id: string) {
  return request({
    url: `/user/${id}`,
    method: 'DELETE'
  })
}
```

### 在组件中使用

```vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { getUserInfo, login } from '@/api/user'
import { setToken } from '@/core/request'

const user = ref<UserInfo | null>(null)

onMounted(async () => {
  try {
    const res = await getUserInfo(1)
    user.value = res.data
  } catch (error) {
    showToast('获取用户失败')
  }
})

const handleLogin = async () => {
  try {
    const res = await login({
      username: 'admin',
      password: '123'
    })
    setToken(res.data.token)
    showToast('登录成功')
  } catch (error) {
    showToast('登录失败')
  }
}
</script>

<template>
  <div>
    <van-cell title="用户名" :value="user?.username" />
    <van-button @click="handleLogin">登录</van-button>
  </div>
</template>
```

---

## 导出说明

| 导出 | 类型 | 说明 |
|------|------|------|
| `request` | 函数 | 核心中转函数，与 `utils/request` 接口一致 |
| `setToken` | 函数 | 设置 Token |
| `getToken` | 函数 | 获取 Token |
| `clearToken` | 函数 | 清除 Token |
| `getCommonHeaders` | 函数 | 获取公共请求头 |
| `RequestConfig` | 类型 | 请求配置接口 |

---

## 与 utils/request 的关系

| 特性 | utils/request | core/request |
|------|---------------|--------------|
| 底层实现 | axios | axios + mxApi |
| 环境支持 | 仅浏览器 | 浏览器 + 原生 |
| 接口格式 | ✅ | ✅ 完全一致 |
| Token 管理 | ❌ | ✅ 内置 |
| 请求头管理 | 分散 | 统一 |

**核心优势**：只需将 `import { request } from '@/utils/request'` 改为 `import { request } from '@/core/request'`，即可自动获得原生环境支持，无需修改任何业务代码。