MSW基于Service Worker实现零侵入、全链路真实的API模拟，支持动态响应、网络异常、可控延迟等行为，开发时启用、生产自动失效，切换真实后端仅需清缓存。
直接用 Service Worker 拦截请求、返回预设数据，就能在没有后端的情况下启动开发——这不是权宜之计，而是现代前端的标准工作流。MSW（Mock Service Worker）正是基于这一原理构建的成熟方案，它不改业务代码、不启本地服务器、不污染真实网络环境，真正让“前端先行”落地。
为什么 Service Worker 是最合适的伪造层
Service Worker 运行在浏览器独立线程，天然具备在网络栈底层拦截 fetch/XHR 请求的能力。相比传统方式，它有不可替代的优势：
- 零侵入：所有请求照常发起，无需替换 axios 实例、不 patch window.fetch，业务逻辑完全保持原样
- 全链路真实：能完整复现 HTTP 状态码、响应头、请求体解析、重定向、CORS 行为，甚至网络延迟和连接中断
- 环境一致：同一套 handlers，既可用于开发时热更新 Mock，也能复用于 Jest/Vitest 单元测试，避免“开发一套、测试一套”的割裂
- 调试友好：Chrome DevTools 的 Network 面板中仍显示该请求，标记为 “(from service worker)”，可查 headers、timing、payload
三步完成基础 Mock 接入
不需要搭建服务、不修改构建配置，5 分钟内让项目跑起来：
-
安装依赖：
npm install msw --save-dev（支持 React/Vue/Svelte 等任意框架） -
定义接口规则：在
src/mocks/handlers.js中写明要伪造的路径与响应：
例如模拟用户列表分页接口：
http.get('/api/users', ({ request }) => {<br> const page = new URL(request.url).searchParams.get('page') || '1';<br> return HttpResponse.json(mockData[page], { status: 200 });<br>}); -
启动拦截器：在应用入口（如
main.tsx）顶部注册并启用：
import { worker } from './mocks/browser';<br>if (process.env.NODE_ENV === 'development') {<br> worker.start({ onUnhandledRequest: 'bypass' });<br>}
不只是返回静态 JSON：模拟真实后端行为
MSW 的核心价值在于它把 Mock 从“数据占位符”升级为“行为描述”。你不再只关心“返回什么”，还能控制“怎么返回”：
- 动态响应：根据请求 header、query、body 内容返回不同结构或状态，比如校验 token 后返回 401
-
网络异常：用
HttpResponse.error()模拟断网，或HttpResponse.networkError()测试降级 UI -
可控延迟：添加
ctx.delay(800)模拟慢网场景，验证 loading 状态与骨架屏表现 -
副作用触发：在 handler 中调用
console.log或更新全局状态，辅助调试请求生命周期
上线前一键关闭，对接真实后端零成本
MSW 的开关是纯运行时的。开发时启用，生产构建时自动失效（因 worker.start() 仅在 dev 模式下执行）。切换真实后端只需：
- 确保
worker.start()不在生产环境执行（MSW 默认已做环境判断） - 确认 API 基地址指向真实域名（如
https://api.example.com），无需改任何请求路径 - 打开浏览器 DevTools → Application → Service Workers，点击 “Unregister” 清除缓存（仅首次切换需手动）
