前端如何模拟Axios的err.request类型请求错误场景

首先明确Axios三个错误分支的触发边界，你之前掌握的两种模拟方法刚好对应另外两个场景：

• 用Mokku模拟4xx/5xx响应：命中err.response分支，客户端拿到了完整的HTTP错误响应
• 用Chrome网络请求阻断面板拦截请求：请求在浏览器出站阶段就被拦下，根本没有发出去，大多命中第三个else分支

而err.request分支的核心触发条件是：请求已经从客户端成功发出，但是全程没有收到任何服务端返回的HTTP响应（没有状态码、没有响应头、没有响应体），可以用以下几种前端侧可直接操作的方式模拟：

具体模拟方案 #

• 方法1：切换浏览器为离线状态
  打开Chrome开发者工具切到Network面板，找到顶部网络节流的下拉选项（默认显示No throttling），直接选择Offline选项后发起请求即可。此时浏览器无法和服务端建立连接，不会收到任何响应，稳定命中err.request分支，测试完成后切回正常网络选项即可。
• 方法2：触发跨域预检失败
  临时把请求地址改成一个不允许你当前前端源跨域的地址，比如本地启动localhost:3000的前端服务时，把接口地址改成任意未配置对应CORS许可的域名。此时浏览器的跨域预检请求会被拦截，不会拿到服务端的正常业务响应，也会进入err.request分支。
• 方法3：主动中断已发出的请求
  用Axios支持的AbortController在请求发出后、响应返回前主动取消请求，此时请求已经发出但被客户端终止，拿不到任何响应，示例代码如下：

  const controller = new AbortController();
  axios.get('/test-api', {
    signal: controller.signal
  }).catch(err => {
    console.log(!!err.response); // 输出false
    console.log(!!err.request); // 输出true，正好命中目标分支
  })
  // 请求发出后立刻取消
  setTimeout(() => controller.abort(), 10);
  

• 方法4：配置极短的请求超时时间
  给单个请求配置1ms级别的超时时长，请求刚发出还未等服务端返回就触发客户端超时，此时同样没有任何响应内容返回，会触发err.request分支：

  axios.get('/test-api', {
    timeout: 1
  }).catch(err => {
    console.log(!!err.response); // false
    console.log(!!err.request); // true
  })
  

避坑提示：不要用DNS解析错误的不存在域名测试，这类场景下请求根本没有成功发出，大概率会落到第三个else分支，不属于err.request的覆盖范围。

内容的提问来源于stack exchange，提问作者Alex