推荐使用 mock service worker（msw）拦截 fetch 请求，它通过 service worker 在请求发出前返回模拟响应，支持浏览器和 node.js；jest-fetch-mock 适用于轻量单元测试，直接替换全局 fetch。
可以用 Mock Service Worker（MSW） 或 jest-fetch-mock 来拦截并模拟 fetch 请求，不发真实网络请求。推荐 MSW，它支持浏览器和 Node.js，且与真实请求生命周期一致，调试友好。
用 MSW 拦截 fetch 请求
MSW 通过 Service Worker 拦截浏览器发出的请求，在请求到达网络前就返回模拟响应。
- 安装：
npm install msw --save-dev - 创建 mock handlers（如
mocks/handlers.js）：
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' }
])
);
}),
rest.post('https://api.example.com/login', (req, res, ctx) => {
const { username } = req.body;
return res(
ctx.status(200),
ctx.json({ token: `fake-jwt-for-${username}` })
);
})
];
- 在测试或开发入口启用（如
mocks/browser.js）：
import { setupWorker } from 'msw';
import { handlers } from './handlers';
export const worker = setupWorker(...handlers);
// 开发时调用 worker.start()
if (typeof window !== 'undefined') {
worker.start({ onUnhandledRequest: 'bypass' });
}
之后所有对 https://api.example.com/... 的 fetch 调用都会被拦截并返回预设响应，真实请求不会发出。
用 jest-fetch-mock 简单测试场景
适合单元测试中快速 mock fetch，无需 Service Worker，轻量直接。
- 安装：
npm install jest-fetch-mock --save-dev - 在 Jest 配置或测试文件顶部启用：
import fetchMock from 'jest-fetch-mock';
fetchMock.enableMocks();
beforeEach(() => {
fetchMock.resetMocks();
});
- 写测试时 mock 响应：
test('fetches users', async () => {
fetchMock.mockResponseOnce(JSON.stringify([{ id: 1, name: 'Alice' }]));
const response = await fetch('https://api.example.com/users');
const data = await response.json();
expect(data).toEqual([{ id: 1, name: 'Alice' }]);
});
注意：它会替换全局 window.fetch，只适用于测试环境，不能用于开发时 API 调试。
注意事项
- MSW 在生产环境默认不启用（需显式调用
worker.start()），确保不会误用 - Service Worker 有缓存和作用域限制，本地开发建议用
http://localhost（非file://） - 若用 Vite / Webpack Dev Server，需配置静态资源使
mockServiceWorker.js可被注册（MSW CLI 会自动处理） - 避免在 handler 中写异步副作用（如调用真实 API），否则仍可能触发网络请求
替代方案：原生重写 fetch（不推荐）
手动覆盖 window.fetch 虽可行，但易出错、难维护，且无法处理 AbortSignal、流式响应等细节，仅作临时调试可用：
const originalFetch = window.fetch;
window.fetch = async (input, init) => {
if (input.includes('api.example.com')) {
return new Response(JSON.stringify([{ id: 1, name: 'Mocked' }]), {
headers: { 'Content-Type': 'application/json' }
});
}
return originalFetch(input, init);
};
这种方式缺乏请求匹配灵活性和调试能力，实际项目中应优先使用 MSW 或 jest-fetch-mock。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
