JS 项目中 Axios 异步请求怎么模拟状态码返回-js教程-PHP中文网

axios异步请求模拟状态码的核心是绕过真实网络请求，用mock工具或拦截机制控制响应status和data。常用方案包括：1. axios拦截器+promise轻量模拟；2. msw精确模拟http行为；3. jest+axios-mock-adapter专注单元测试。

js 项目中 axios 异步请求怎么模拟状态码返回

在 JS 项目中，Axios 异步请求模拟状态码返回，核心是**绕过真实网络请求，用 Mock 工具或拦截机制控制响应的 status 和 data**。不需要改业务代码，重点在于测试或开发阶段的请求“伪造”能力。

用 Axios 拦截器 + Promise 模拟（轻量、无依赖）

适合单元测试或快速调试，不引入额外库：

通过 Axios 实例的 request interceptor 返回假响应，跳过真实请求
在 request 拦截器中判断 URL 或参数，直接 resolve 一个符合 Axios 响应结构的对象
注意：必须返回 { data, status, statusText, headers, config } 完整结构，否则 .then() 中的 response 不兼容

示例：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

const mockAxios = axios.create();
mockAxios.interceptors.request.use(config => {
  if (config.url === '/api/user') {
    return Promise.resolve({
      data: { id: 1, name: 'test' },
      status: 200,
      statusText: 'OK',
      headers: {},
      config
    });
  }
  if (config.url === '/api/error') {
    return Promise.reject({
      response: {
        data: { message: 'Not Found' },
        status: 404,
        statusText: 'Not Found',
        headers: {},
        config
      }
    });
  }
  return config; // 继续真实请求
});

用 Mock Service Worker（MSW，推荐用于真实开发/测试环境）

MSW 是目前最接近真实 HTTP 行为的方案，能精确模拟任意状态码、延迟、请求头、跨域等：

安装 msw 和 node-fetch（浏览器环境无需 fetch）
定义 handlers，例如 rest.get('/api/posts', (req, res, ctx) => res(ctx.status(500), ctx.json({ error: 'server down' })))
启动 worker 后，所有 Axios 请求自动被劫持，无需修改 Axios 配置
支持运行时动态切换 mock 规则，比如测试 loading、error、success 多种分支

用 Jest + Axios Mock Adapter（适合单元测试）

若你用 Jest 写测试，axios-mock-adapter 简单直接：

安装后创建 adapter：const mock = new MockAdapter(axios)
设置响应：mock.onGet('/api/users').reply(401, { message: 'Unauthorized' })
支持链式 reply、延迟、多次不同响应（如第一次 500、第二次 200），方便测重试逻辑
测试结束后调用 mock.reset() 避免污染

注意点（容易踩坑）

无论用哪种方式，以下细节决定是否真正生效：

确保 mock 在 Axios 实例发起请求前已注册（尤其拦截器和 mock adapter）
如果项目用了自定义 Axios 实例（如 api.js 中 create 的实例），mock 必须作用于该实例，而非默认 axios
状态码为 4xx/5xx 时，Axios 默认抛错——想进 .then 需配置 validateStatus: () => true；想进 .catch 则保持默认即可
Mock 响应中的 statusText 建议与状态码匹配（如 404 对应 'Not Found'），部分 UI 库会读取它