JS 项目中 Fetch 请求怎么进行错误状态 Mock 模拟-js教程-PHP中文网

推荐使用 mock service worker（msw）拦截 fetch 请求并返回预设错误响应（如 404、500），或通过全局覆盖 fetch 模拟网络异常；需在业务层统一检查 response.ok 或捕获异常以正确处理错误。

js 项目中 fetch 请求怎么进行错误状态 mock 模拟

在 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 等，测试断言更清晰可靠。