MSW (Mock Service Worker)

[!info] related notes

• 所属 MOC: http-and-frontend-networking-moc
• 请求 API: fetch-api, xhr, axios

MSW (Mock Service Worker) 是现代前端开发中非常流行的一个 API 模拟（Mocking）库，适用于浏览器和 Node.js 环境。

与传统的 Mock 工具（如直接拦截修改 fetch 或 XMLHttpRequest 对象，即所谓的 “Monkey-patching”）不同，MSW 的核心理念是在网络层级（Network level）拦截请求。

以下是对 MSW 概念、工作原理以及核心优势的详细介绍：

1. 核心工作原理

MSW 的工作方式在浏览器和 Node.js 环境中有所不同，但你只需要编写一套 Mock 逻辑。

在浏览器中：利用 Service Worker

在浏览器环境下，MSW 利用了 HTML5 的 Service Worker API。

1. MSW 会在你的应用中注册一个 Service Worker。
2. 当你的前端代码发出网络请求（如通过 fetch 或 axios）时，Service Worker 会在请求到达真实网络之前将其拦截。
3. 它将拦截到的请求与你在 MSW 中定义的“处理程序（Handlers）”进行匹配。
4. 如果匹配成功，Service Worker 会直接返回你定义的 Mock 响应；如果未匹配，则允许请求继续发送到真实服务器。

在 Node.js 环境中（用于测试）：

由于 Node.js 没有 Service Worker，MSW 在 Node 环境（如 Jest, Vitest 测试中）使用了底层请求拦截库（@mswjs/interceptors）。它拦截 http、https 和全局 fetch，但对开发者完全透明。你使用的是与浏览器环境完全相同的那套 Handlers 代码。

---

2. 为什么 MSW 如此受欢迎？（核心优势）

• 真正的“无侵入性” (Seamless) 传统的 Mock 工具通常需要你在代码里写 if (isMock) { return mockData }，或者强行替换全局的 fetch 方法。MSW 不需要你修改任何业务代码，你的应用完全不知道它的请求是被 Mock 掉的，行为与生产环境完全一致。
• 网络级拦截与极佳的调试体验 因为它是通过 Service Worker 拦截的，所以你可以在浏览器的 Network（网络）面板中真实地看到这些请求和响应记录（它们会被标记为来自 Service Worker）。这极大地提升了调试体验。
• 一次编写，到处运行 (Write Once, Run Anywhere) 这是 MSW 最大的卖点之一。你只需要写一个 handlers.js 文件来定义你的 Mock 路由和数据。这套代码既可以在浏览器里用于本地开发，也可以直接丢进 Jest/Vitest 用于单元测试/集成测试，还可以配合 Cypress/Playwright 用于E2E 测试。
• 原生支持 REST 和 GraphQL 无论你的项目使用的是传统的 RESTful API 还是 GraphQL，MSW 都提供了非常优雅、语义化的 API 来进行拦截和模拟。

---

3. 主要应用场景

1. 后端 API 尚未就绪时的独立开发：前端开发不再需要等待后端完成接口，只需根据 API 文档在 MSW 中写好响应数据，即可无缝开发。
2. 前端自动化测试：在自动化测试中，为了保证测试的稳定性和快速性，通常需要隔离后端。MSW 是目前 React Testing Library、Vue Test Utils 等测试方案中最推荐的请求 Mock 工具。
3. 异常情况模拟：很难让真实的后端配合你测试“服务器 500 错误”或“网络延迟 5 秒”的情况。使用 MSW，你可以轻松模拟各种极端网络情况，测试前端应用的容错性和加载状态。