MSW 3 通关教程

外观

7.2 交互实验室 ​

… 正在启动 Mock Worker

本页所有组件都由当前文档站注册的 同一个 Mock Worker 驱动，handler 与 React/Vue 示例、Vitest 测试完全共享（@msw-tutorial/mocks）。刷新页面状态不丢（假数据库持久化在 localStorage）。

全局场景：延迟 / 错误注入 / 鉴权开关 ​

先在这里调好全局参数，下面三个实验室都会受到影响。比如延迟拖到 2000ms 后再发 GraphQL 请求，可以直观看到耗时。

HTTP 实验室 ​

方法、路径、请求头、请求体全部可编辑。几个推荐尝试：

  • GET /api/posts?page=1&pageSize=3&tag=msw
  • GET /api/status/503 与 GET /api/status/429
  • GET /api/slow（配合上面的延迟滑块）
  • GET /api/network-failure（fetch reject，对比状态码错误）
  • POST /api/auth/login 登录（admin/admin1234）后把 token 用在下一个控制台

通用 HTTP 控制台

GraphQL ​

GraphQL 控制台

变更操作需要 Bearer 令牌：先在上面的 HTTP 实验室登录，把 tokenPair.accessToken 粘进来。

WebSocket ​

点击连接后：开两个浏览器标签互发消息、等 5 秒收心跳、试 close-me（4001）与 error-me（1011）。

WebSocket 实验室 未连接

打开两个浏览器标签同时连接，可互收广播消息；服务端每 5 秒发送一次心跳。

（连接后这里会出现欢迎语与系统消息）

恢复初始状态 ​

实验把假数据库改乱了？在上面的 ScenarioLab 点"重置场景"，或直接发：

重置假数据库