文章目录
- 一、为什么要做「前端请求分层」？
- 目标
- 二、经典的前端请求分层结构
- request 层（HTTP 基础设施）
- service 层（接口原子封装）
- api 层（业务语义层）
- 页面 / hooks 层
- 三、什么是「自动接口生成」？
- 常见来源
- OpenAPI（Swagger）—— 最主流
- 常用工具（重点）
- openapi-generator（通用）
- swagger-typescript-api
- 阿里系
- 四、推荐的「自动生成 + 分层」组合方案（实战）
- 工作流
- api 层示例
- 五、进阶
- 与 React Hooks 结合
- 与 Mock 联动
- Monorepo / 多端复用
- 六、什么时候不适合自动生成？
- 最后一句总结
一、为什么要做「前端请求分层」？
先看一个没有分层的典型问题：
// 页面里constres=awaitrequest('/api/user/list',{method:'POST',data:{page:1}})setData(res.data.list)❌ 问题：
- 接口地址散落在页面
- data / params 结构不统一
- 返回值类型靠猜
- 后端字段改一次 → 全站崩
- mock / 真接口切换痛苦
目标
页面不关心 HTTP，只关心“业务能力”
constusers=awaitgetUserList({page:1})二、经典的前端请求分层结构
一个成熟前端项目，请求通常分 3～4 层：
src/ ├── api/ ← 业务接口层（给页面用） ├── services/ ← 原子请求层（HTTP 细节） ├── request/ ← axios / fetch 封装 ├── types/ ← 接口类型定义（自动生成）下面逐层解释。
request 层（HTTP 基础设施）
只干一件事：稳定、可控地发请求
// request/index.tsimportaxiosfrom'axios'exportconsthttp=axios.create({baseURL:'/api',timeout:10000})http.interceptors.response.
