JavaScript 中怎么用 Mock 拦截全局 fetch 请求-js教程-PHP中文网

msw通过service worker在浏览器层面拦截fetch/xhr请求，无需修改业务代码，相比手动重写window.fetch更可靠、功能更全，支持声明式api、动态响应、跨环境运行及主流测试框架集成。

javascript 中怎么用 mock 拦截全局 fetch 请求

在 JavaScript 中，可以用 Mock Service Worker（MSW） 拦截全局 fetch 请求，它通过拦截浏览器原生的 fetch（和 XMLHttpRequest）实现请求模拟，无需修改业务代码，也不依赖代理或服务端配合。

为什么选 MSW 而不是手动重写 fetch？

手动覆盖 window.fetch 容易出错：比如漏掉 AbortSignal、忽略 redirect 逻辑、破坏原始响应结构，还可能干扰其他测试工具。MSW 封装了这些细节，提供声明式 API 和运行时控制能力，支持浏览器和 Node.js 环境，且与主流测试框架（Jest、Vitest）集成良好。

快速上手：拦截一个 GET 请求

1. 安装依赖：

npm install msw --save-dev

2. 创建 mock handlers（例如 mocks/handlers.js）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

import { rest } from 'msw'

export const handlers = [
  rest.get('https://api.example.com/users', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' }
      ])
    )
  })
]

3. 设置 worker（mocks/browser.js）：

import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

4. 在应用入口或测试前启动 worker：

// main.js 或 test setup 文件中
if (typeof window !== 'undefined') {
  const { worker } = require('./mocks/browser')
  worker.start({ onUnhandledRequest: 'bypass' })
}

✅ 启动后，所有对 https://api.example.com/users 的 fetch 调用都会被拦截并返回模拟数据。

进阶技巧：动态响应与请求校验

你可以基于 URL 参数、请求头或请求体返回不同结果：

用 req.url.searchParams.get('page') 读取查询参数
用 req.headers.get('Authorization') 校验 token
用 req.body（需先 req.json()）解析 POST 数据
用 ctx.delay(500) 模拟网络延迟
用 ctx.status(401) + ctx.json({ error: 'Unauthorized' }) 模拟错误场景

注意事项

• MSW 只在开发和测试环境启用，生产环境完全不加载；
• 若使用 Vite，需在 vite.config.js 中配置 server.proxy 关闭真实代理，避免冲突；
• 首次运行时浏览器会提示 “This page is controlled by a service worker”，属正常现象；
• 若拦截失败，检查是否启用了 worker、URL 是否完全匹配（含协议和 trailing slash）。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南