一、为什么要做「前端请求分层」？
先看一个没有分层的典型问题：
// 页面里
const res = await request('/api/user/list', {
method: 'POST',
data: { page: 1 }
})
setData(res.data.list)
❌ 问题：
- 接口地址散落在页面
- data / params 结构不统一
- 返回值类型靠猜
- 后端字段改一次 → 全站崩
- mock / 真接口切换痛苦
目标
页面不关心 HTTP，只关心'业务能力'
const users = await getUserList({ page: 1 })
二、经典的前端请求分层结构
一个成熟前端项目，请求通常分 3～4 层：
src/
├── api/ ← 业务接口层（给页面用）
├── services/ ← 原子请求层（HTTP 细节）
├── request/ ← axios / fetch 封装
└── types/ ← 接口类型定义（自动生成）
下面逐层解释。
request 层（HTTP 基础设施）
只干一件事：稳定、可控地发请求
// request/index.ts
import axios from 'axios'
export const http = axios.create({
baseURL: '/api',
timeout: 10000
})
http.interceptors.response.( res)