前端 API Mock 与接口联调提效指南：主流方案横向对比与工程化实践

喵呜！大家好，我是爱折腾工具、坚决不当「联调阻塞人」的 效率喵 🐾。

相信所有前端打工人都有过这种痛苦时刻：页面结构早早画完了，UI 细节也磨平了，一问后端同学——「接口还在写，字段明后天给」。 结果就是：要么在本地写死一堆乱七八糟的 let mockData = [...]，提交代码前还得胆战心惊地找出来删掉；要么直接进入摸鱼（划掉）等待状态，最后一天加班通宵赶联调。

这怎么能忍？！真正的效率极客，必须做到 「后端没写完，前端先上线（本地）」。

今天效率喵就给大家盘点目前前端圈最主流、最丝滑的 API Mock 与接口联调方案，从本地开发、网络代理到全团队协作，按需自取，建议收藏！✨

一、 现代化开发首选：MSW (Mock Service Worker)

如果 2024 年你还在用改写全局 fetch 或 XMLHttpRequest 的传统 Mock 方案，听我的，火速换到 MSW！

🌟 为什么它是我的最爱？

• 零侵入：它基于浏览器的 Service Worker API，在网络层真正发出请求后进行拦截，你的业务代码（Axios / Fetch 配置）完全不需要为了 Mock 做出任何妥协！
• 同构支持：不仅能在浏览器里跑，写 Jest / Vitest 单元测试、跑 Storybook 时也能无缝复用一套 Handler！

💻 极速上手代码：

// src/mocks/handlers.ts
import { http, HttpResponse, delay } from 'msw'

export const handlers = [
  http.get('/api/user/profile', async () => {
    // 模拟真实的网络延迟
    await delay(300) 
    
    return HttpResponse.json({
      code: 0,
      data: {
        id: 'cat_9527',
        nickname: '效率喵',
        tags: ['Tool Hunter', 'Frontend', 'Vim Addict'],
        avatar: 'https://avatar.example.com/cat.png',
      },
      message: 'Success',
    })
  }),

  // 模拟异常状态也超简单
  http.post('/api/pay', () => {
    return new HttpResponse(null, { status: 402, statusText: 'Payment Required' })
  }),
]

在开发入口 main.ts 里只在 dev 环境启动 Worker，打包时完全不会污染生产代码包，优雅！

二、 懒人与测试神器：插件与网络层代理拦截

有时候我们只想测一个冷门的异常边界（比如接口报 502、或者返回超长空数组），改代码再热更新都嫌慢，这时就该请出 网络层拦截工具 了！

1. Requestly (Chrome 插件 / 桌面客户端)

• 快捷键/UI 极爽：无需修改一行前端代码，直接在浏览器插件里规则重定向（Redirect URL）或者修改 Response Body。
• 妙用场景：生产环境 Bug 线上复现排查，直接把线上的 API 代理到本地或 Mock 数据源。

2. Whistle / Proxyman

• 抓包 & Mock 两手抓：写几行配置规则就能搞定：
  bash复制

  # Whistle 规则示例：将线上用户接口重定向到本地 Mock JSON
  api.prod.com/v1/user resBody://{mock_user.json}
  

• 移动端调试神器：H5 在真机联调时，配合代理工具注入 Mock 数据最省心。

三、 团队级单一事实来源：Schema-Driven (OpenAPI / Apifox)

个人爽只是小爽，团队爽才是大爽。前后端经常扯皮的核心原因就是：文档与实现脱节。

💡 高效流派打法：契约驱动 (Contract-First)

1. 接口定义：前后端在 Apifox / Swagger 上先敲定 API 规范（契约）。
2. 自动化 Mock 服务：Apifox / YApi 会根据定义好的 JSON Schema 自动生成符合格式的 Mock 服务（支持基于 Faker.js 规则生成真实假数据）。
3. 前端代码生成器：使用 openapi-typescript 或 orval 自动生成全套 TypeScript Interface 和请求 Hooks！

# 只要后端更新了 Swagger 文档，跑一条脚本即可全量更新 TS 类型
npx openapi-typescript https://api.dev.local/swagger.json -o ./src/types/api.d.ts

效果：后端改了字段名？跑一下脚本，前端编辑器全盘报红，联调前就把类型不匹配的 Bug 扼杀在摇篮里！

四、 方案大横评：哪个适合你的项目？

效率喵做了一张对比清单，方便大家对号入座：

🐾 效率喵的私房提效 Tips

1. 善用 Faker.js 生成动态数据：千万别自己写 test1, test2，用 @faker-js/faker 生成逼真的姓名、地址、头像 URL，能提前发现超长文本换行、特异字符引起的布局坍塌。
2. 善用 Raycast / Alfred 片段 (Snippets)：我把常用的 Mock 响应包装成了快捷模板（比如标准的统一返回体 { code: 0, data: {}, msg: '' }），按下 !mockres 瞬间补全，打字速度拉满！
3. 接口契约监控：联调前夕，写个简单的脚本把本地 Mock 的返回值与后端真实 Dev 环境返回值做一次 Schema Diff，提前发现隐蔽改动。

大家在平时开发中是用哪种方案 Mock 接口的？或者有私藏更小众的神仙工具？欢迎在评论区和效率喵交流安利！下期打算聊聊 「Raycast 深度工作流」，咱们下篇见～ 🐱💻