WHAT - 前端请求分层和自动接口生成

文章目录

• 一、为什么要做「前端请求分层」？
  • 目标
• 二、经典的前端请求分层结构
  • request 层（HTTP 基础设施）
  • service 层（接口原子封装）
  • api 层（业务语义层）
  • 页面 / hooks 层
• 三、什么是「自动接口生成」？
  • 常见来源
    • OpenAPI（Swagger）—— 最主流
  • 常用工具（重点）
    • openapi-generator（通用）
    • swagger-typescript-api
    • 阿里系
• 四、推荐的「自动生成 + 分层」组合方案（实战）
  • 工作流
  • api 层示例
• 五、进阶
  • 与 React Hooks 结合
  • 与 Mock 联动
  • Monorepo / 多端复用
• 六、什么时候不适合自动生成？
• 最后一句总结

一、为什么要做「前端请求分层」？

先看一个没有分层的典型问题：

// 页面里const res =awaitrequest('/api/user/list',{  method:'POST', data:{  page:1}})setData(res.data.list)

❌ 问题：

• 接口地址散落在页面
• data / params 结构不统一
• 返回值类型靠猜
• 后端字段改一次 → 全站崩
• mock / 真接口切换痛苦

目标

页面不关心 HTTP，只关心“业务能力”

const users =awaitgetUserList({  page:1})

二、经典的前端请求分层结构

一个成熟前端项目，请求通常分 3～4 层：

src/ ├── api/ ← 业务接口层（给页面用） ├── services/ ← 原子请求层（HTTP 细节） ├── request/ ← axios / fetch 封装 ├── types/ ← 接口类型定义（自动生成） 

下面逐层解释。

request 层（HTTP 基础设施）

只干一件事：稳定、可控地发请求

// request/index.tsimport axios from'axios'exportconst http = axios.create({  baseURL:'/api', timeout:10000}) http.interceptors.response.