javascript的网络请求拦截怎么做_如何模拟请求和响应

JavaScript无法直接拦截真实网络请求，但可通过四种方式模拟：1. Service Worker（HTTPS/localhost）；2. MSW代理工具；3. DevTools手动调试；4. Jest等测试框架mock。

JavaScript 本身无法直接“拦截”浏览器发出的真实网络请求（比如 fetch 或 XMLHttpRequest），这是出于安全限制——脚本不能随意劫持或篡改其他页面的请求。但你可以通过几种方式在开发、测试或调试场景中模拟拦截行为，实现类似效果：

1. 使用 Service Worker 拦截并重写请求（仅限 HTTPS 或 localhost）

Service Worker 是浏览器提供的底层能力，可在请求发出前或响应返回前进行干预，适合 PWA 或本地开发调试。

• 注册一个 SW 脚本，在 fetch 事件中监听所有请求
• 用 event.respondWith() 返回自定义 Response，比如 mock 数据、延迟响应、替换 URL
• 注意：SW 只对同源且已启用 HTTPS（或 localhost）的页面生效，且需用户首次访问后刷新才激活

示例：

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/user')) {
    event.respondWith(
      new Response(JSON.stringify({ id: 1, name: 'mock-user' }), {
        headers: { 'Content-Type': 'application/json' }
      })
    );
  }
});

2. 开发阶段用代理工具（推荐：Mock Service Worker / MSW）

MSW 是目前最主流的前端请求拦截方案，它基于 Service Worker，但提供更友好的 API 和开发体验，支持 REST 和 GraphQL。

• 无需修改业务代码，只需定义 handlers（如 rest.get('/api/posts', ...)）
• 自动识别真实请求并返回 mock 响应，控制台还能看到拦截日志
• 支持条件匹配、延迟、错误响应、动态数据等
• 生产环境默认不启用，只在 dev 模式下运行

安装后简单启动即可：

import { setupWorker, rest } from 'msw';

const worker = setupWorker(
  rest.get('/api/comments', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json([{ id: 1, text: 'Hello!' }]));
  })
);

worker.start(); // 开发时调用

3. 浏览器 DevTools 手动模拟请求（快速调试用）

不需要写代码，适合临时验证接口行为或查看响应结构：

• 打开 Network 面板 → 右键某个请求 → “Copy as fetch” → 粘贴到 Console 修改参数再执行
• 用 “Edit and Resend” 功能修改请求头、body、method 后重新发送
• 配合 “Response” 标签页手动编辑返回内容（仅限查看，不能拦截真实响应）

4. 单元测试中拦截请求（如 Jest + jest-fetch-mock）

在测试环境中彻底替换全局 fetch 实现，确保测试可控、可重复：

• 安装 jest-fetch-mock，在测试前调用 enableFetchMocks()
• 用 fetch.mockResponse() 或 fetch.mockReject() 控制返回结果
• 适合验证组件是否正确处理 loading、success、error 状态

例如：

fetch.mockResponse(JSON.stringify({ data: 'ok' }));
await myApiCall();
expect(fetch).toHaveBeenCalledWith('/api/test');

不复杂但容易忽略：真正“拦截”必须依赖浏览器机制（如 SW）或测试框架覆盖；直接改写 window.fetch 或 XMLHttpRequest 虽可行，但不稳定、易漏、难维护，不建议用于生产级 mock。