JavaScript 中怎么用 MSW (Mock Service Worker) 拦截网络请求-js教程-PHP中文网

msw 通过 service worker 在浏览器网络层拦截请求并返回模拟响应，无需修改业务代码，支持开发、调试与 e2e 测试。1. 安装 msw 并注册 mockserviceworker.js；2. 用 rest.get/post 等定义 handler，配合 ctx 构造响应；3. 按环境（如 node_env === 'development'）控制启用；4. 注意同源限制、sw 就绪时机及 url 匹配。

javascript 中怎么用 msw (mock service worker) 拦截网络请求

在 JavaScript 项目中用 MSW 拦截网络请求，核心是启动一个基于 Service Worker 的请求代理层，在浏览器发起真实请求前将其捕获并返回模拟响应。它不修改代码逻辑，也不依赖测试框架，适用于开发、调试和 E2E 测试场景。

1. 安装与注册 Service Worker

MSW 依赖浏览器的 Service Worker API，需先安装包并注册 worker 文件：

运行 npm install msw --save-dev（或 yarn add msw -D）
生成 worker 文件：npx msw init public/（假设你的静态资源根目录是 public/，会生成 public/mockServiceWorker.js）
在应用入口（如 index.js 或 main.js）中注册：

if (typeof window !== 'undefined') {
  const { worker } = require('./mocks/browser');
  worker.start({
    onUnhandledRequest: 'bypass'
  });
}

2. 定义请求拦截规则（handlers）

在 src/mocks/browser.js 中导出 handler 列表，每个 handler 对应一类请求：

jm-jsjkxyjs02-pzl-803

查询全球任意城市的实时天气和未来天气预报

下载

用 rest.get()、rest.post() 等匹配 HTTP 方法和 URL（支持通配符和正则）
回调函数中调用 res(ctx.status(), ctx.json(), ctx.delay()) 构造响应
URL 可写成字符串（'/api/users'）、正则（/\/api\/.+/）或动态路径参数（/api/users/:id）

import { setupWorker, rest } from 'msw';

export const worker = setupWorker(
  rest.get('/api/posts', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([{ id: 1, title: 'Mock Post' }]),
      ctx.delay(300)
    );
  }),
  rest.post('/api/login', (req, res, ctx) => {
    const { username } = req.body;
    if (username === 'admin') {
      return res(ctx.json({ token: 'mock-jwt-token' }));
    }
    return res(ctx.status(401));
  })
);

3. 控制启用时机与环境适配

避免在生产环境误启 mock，推荐按环境条件加载：

开发时自动启用：在 webpack 或 Vite 配置中通过 process.env.NODE_ENV === 'development' 判断
测试时启用：Jest 中可在 setupFilesAfterEnv 里启动 worker.start({ onUnhandledRequest: 'error' })
手动开关：暴露全局函数（如 window.msw = { start, stop }），方便开发者工具中临时启停