Mock 与接口联调
前端开发永远跑在后端接口前面：后端没好的接口，前端要么干等，要么自己造数据。Mock 就是“伪造接口”：在请求层把真实请求拦下来，返回约定的假数据，让前后端按同一份接口文档并行开发。
进阶做法是 MSW（Mock Service Worker）：在浏览器里拦截真实网络请求（基于 Service Worker），代码完全不知道自己在用假数据，切换到真接口零改动。开发代理则负责把 /api 转发到后端真实地址。
- 前后端按接口文档（OpenAPI/YApi）并行开发，前端用 Mock 先跑通
- MSW 拦截网络层：业务代码无感知，切换到真接口零成本
- 联调三步：改代理指向后端 → 逐个接口对数据 → 差异走环境变量
JS
// 1. MSW 拦截接口（浏览器里跑的假服务器） import { setupWorker, rest } from 'msw'; const worker = setupWorker( rest.get('/api/user', (req, res, ctx) => { return res(ctx.json({ id: 1, name: '张三', role: 'admin' })); // 与文档一致 }), ); worker.start(); // 之后 fetch('/api/user') 拿到的就是假数据 // 2. vite.config.js 的代理：联调时把假接口换成真后端 // server: { proxy: { '/api': { target: 'http://api.example.com' } } } // 3. 最简单的开发期 Mock（不用框架）：请求函数里直接分支 export async function getUser() { if (import.meta.env.DEV && !import.meta.env.VITE_REAL_API) { return { id: 1, name: '张三' }; // 开发环境返回假数据 } return fetch('/api/user').then(r => r.json()); }
本节要点Mock 让前端不卡在后端进度上：MSW 拦截网络层，业务代码零感知切换真假接口。
