Mock Service Worker

当你需要在本地开发、集成测试、端到端测试或Storybook展示中模拟后端API，且希望同一套模拟逻辑跨浏览器和Node.js环境复用时，Mock Service Worker（MSW）通过Service Worker拦截真实请求，让你用标准Fetch API定义网络行为，而非模拟请求客户端。

它能做什么

MSW支持拦截REST和GraphQL API请求，无论请求由fetch、axios还是XMLHttpRequest发出；同时支持Server-Sent Events（SSE）和WebSocket的模拟。你可以为路径参数、查询参数、请求正文、cookies编写处理逻辑，并返回JSON、二进制、流式响应或网络错误。

• REST模拟: 通过http命名空间定义GET/POST等处理程序，支持路径参数和查询参数
• GraphQL模拟: 通过graphql命名空间拦截查询和修改操作，支持变量和Schema优先模拟
• WebSocket模拟: 拦截客户端事件，支持广播、转发、连接错误和关闭
• SSE模拟: 拦截源并自定义服务器事件、消息事件、重试与连接错误
• 响应时长: 通过delay()模拟真实网络延迟

适合谁用

前端开发者、测试工程师、全栈工程师在以下场景中会用到MSW：本地开发时模拟第三方API或尚未完成的后端接口；用Vitest、Jest编写集成测试时覆盖各种网络行为；用Playwright做端到端测试时去除HTTP调用依赖；在Storybook中展示组件的加载、错误、空状态。

• 集成测试: 每个测试可独立覆盖网络行为，测试顺利路径和边缘情况
• 端到端测试: 模拟本地或外部API，专注于用户体验而非HTTP调用
• Storybook展示: 模拟精确网络状态，与团队共享组件如何处理空闲/错误/加载
• React Native: 跨移动端复用同一套模拟处理程序

怎么上手

安装命令：npm i msw --save-dev。然后创建请求处理程序（handler），例如使用http.get拦截GET请求并返回JSON响应；再通过setupWorker（浏览器）或setupServer（Node.js）注册这些处理程序，调用worker.start()或server.listen()启用拦截。官方文档提供5分钟快速入门指南，涵盖Vitest集成。

• 安装: npm i msw --save-dev
• 定义处理程序: import { http, HttpResponse } from 'msw'，编写handler函数
• 浏览器启用: setupWorker(...handlers).start()
• Node.js启用: setupServer(...handlers).listen()
• CLI工具: msw init 可快速生成Service Worker文件

与同类工具的差异

MSW的核心差异在于它不在应用层模拟请求客户端，而是在网络层通过Service Worker（浏览器）或拦截模块（Node.js）拦截真实请求。这意味着无论你使用什么HTTP库，模拟逻辑都无需修改。它强调“独立API模拟层”，为整个堆栈提供单一真实来源，无需适配器或插件即可在Vitest、Playwright、Storybook、React Native间复用。

• 拦截层级: 基于Service Worker，而非对fetch/axios的mock
• 复用性: 同一套handler可在测试、开发、演示中直接使用
• 标准API: 使用标准Fetch API处理请求和响应，不绑定特定工具
• 无侵入: 不修改全局fetch或XMLHttpRequest，尊重平台标准

注意事项与限制

MSW v2.x版本不再支持1.x的遗留API，迁移需参考官方迁移指南。默认行为中，未匹配的请求会通过（passthrough），但可通过配置改为抛出错误。浏览器端需要Service Worker支持，部分老旧浏览器可能不兼容。WebSocket模拟目前仍处于实验阶段，订阅（subscription）功能尚未完全覆盖。

• 迁移: 1.x到2.x有破坏性变更，需按官方迁移文档调整
• 浏览器兼容: 依赖Service Worker，不支持IE等旧浏览器
• WebSocket: 订阅功能尚未完整支持
• 调试: 提供生命周期事件和事件日志，便于追踪拦截过程

常见问题

Q1：MSW能否同时拦截REST和GraphQL请求？

A1：可以。MSW通过http命名空间处理REST请求，通过graphql命名空间处理GraphQL操作（查询和修改），两者可在同一项目中并行使用，互不干扰。

Q2：MSW在Node.js测试中如何与Vitest配合？

A2：安装msw后，在测试文件中使用setupServer创建服务端模拟器，调用server.listen()启用拦截。每个测试用例可通过server.use()临时覆盖处理程序，测试结束后调用server.resetHandlers()恢复。官方快速入门指南提供了完整的Vitest集成示例。

Q3：MSW的模拟处理程序能否在Storybook和Playwright中复用？

A3：可以。MSW的设计目标就是跨环境复用。你只需定义一次handler数组，然后在Storybook中通过setupWorker启用，在Playwright测试中通过setupServer启用，无需额外适配器或插件。

更多同类工具与网站,可在前端库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。