推荐使用 Mock Service Worker（MSW）拦截 fetch 请求并返回预设错误响应（如 404、500），或通过全局覆盖 fetch 模拟网络异常；需在业务层统一检查 response.ok 或捕获异常以正确处理错误。
在 JS 项目中，对 Fetch 请求进行错误状态 Mock，核心是拦截真实请求、返回预设的错误响应（如 404、500、网络异常等），而不是让请求真正发出。常用方式是借助 Mock Service Worker（MSW） 或原生 fetch 覆盖（polyfill + 拦截），下面分场景说明关键做法。
用 MSW 模拟 HTTP 错误状态（推荐）
MSW 是当前最主流、类型安全、与测试框架（如 Vitest/Jest）集成良好的方案。它通过 Service Worker 拦截请求，在浏览器或 Node 环境下都可运行。
- 安装：
npm install msw --save-dev - 定义错误响应的 handlers，例如模拟 500：
import { rest } from 'msw';
export const handlers = [
rest.get('/api/user', (req, res, ctx) => {
return res(
ctx.status(500),
ctx.json({ message: 'Internal Server Error' })
);
}),
rest.post('/api/login', (req, res, ctx) => {
return res(
ctx.status(401),
ctx.json({ error: 'Unauthorized' })
);
})
];
在测试中启用：
import { setupServer } from 'msw/node';
import { handlers } from './mocks/handlers';
const server = setupServer(...handlers);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
用全局 fetch 替换模拟网络异常
某些场景（如测试离线逻辑、超时、AbortError）无法用 HTTP 状态码表达，需直接控制 fetch 行为。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 在测试前临时覆盖全局 fetch：
global.fetch = jest.fn(() =>
Promise.reject(new TypeError('Failed to fetch'))
);
- 模拟 AbortError（常见于超时取消）：
global.fetch = jest.fn(() =>
Promise.reject(new DOMException('Aborted', 'AbortError'))
);
注意：这种方式绕过了响应体和状态码，适合验证错误捕获逻辑（如 try/catch 或 .catch()），但不适用于需要检查具体 status 的场景。
在组件/业务代码中统一处理 Fetch 错误
Mock 只是手段，关键是业务代码能正确识别并响应各类错误。建议封装 fetch 并做标准化错误分类：
async function apiFetch(url, options = {}) {
try {
const res = await fetch(url, options);
if (!res.ok) {
// 4xx / 5xx 触发业务错误
const errorData = await res.json();
throw new ApiError(res.status, errorData);
}
return await res.json();
} catch (err) {
if (err.name === 'TypeError' && err.message.includes('fetch')) {
throw new NetworkError(); // 网络异常
}
if (err.name === 'AbortError') {
throw new AbortError(); // 请求被取消
}
throw err;
}
}
这样 Mock 时只需对应抛出 ApiError、NetworkError 等，测试断言更清晰可靠。
避免常见陷阱
- 不要只 Mock
fetch函数却不调用res.json()—— 实际错误常发生在解析阶段（如返回非 JSON 的 500 页面）； - MSW 在 Node 环境需搭配
node-server启动，Vitest 中要确保setupFiles正确加载； - Mock 多个相同 URL 时，注意 handler 执行顺序 —— MSW 匹配第一个符合条件的 handler；
- 测试完务必
server.resetHandlers()，防止不同 test case 互相干扰。
