开始之前

错误状态和请求被取消是不同的失败路径。本教程先返回 HTTP 503，再用延迟响应测试客户端的等待上限，每次只改变一个条件，便于确认界面进入了正确分支。

边看边操作在 临时 Mock API 中打开实际工作区
01

创建稳定的 503 响应

把下面配置放进 Mock API 并创建接口。只有一个响应项，因此每次实际调用都重复返回 503。

示例
{
  "replies": [
    {
      "status": 503,
      "delay_ms": 0,
      "body": {
        "code": "TEMPORARY_UNAVAILABLE",
        "message": "测试服务暂不可用"
      }
    }
  ]
}
02

显式检查 HTTP 状态

在开发页调用生成地址。fetch 收到 HTTP 503 通常仍会得到 Response，需要检查 ok 或 status 才能进入业务错误处理。

示例
const endpoint = '替换为生成的 HTTPS 地址';
const response = await fetch(endpoint, { credentials: 'omit' });
if (!response.ok) {
  console.log('进入 HTTP 错误分支', response.status);
} else {
  console.log(await response.json());
}
03

另外创建慢响应接口

删掉或保留上一地址作对照，新建下面这份配置。服务等待约 2 秒再响应，网络和调度还可能增加耗时，不要对毫秒数做严格相等断言。

示例
{
  "replies": [
    {
      "status": 200,
      "delay_ms": 2000,
      "body": {
        "ok": true
      }
    }
  ]
}
04

给客户端设置更短的等待上限

替换为慢响应地址。预期约 500 毫秒后出现 AbortError；去掉中止逻辑时则应收到 200。这证明的是客户端取消分支，不是服务器返回 HTTP 408。

示例
const endpoint = '替换为慢响应接口地址';
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 500);
try {
  const response = await fetch(endpoint, { signal: controller.signal, credentials: 'omit' });
  console.log(response.status);
} catch (error) {
  console.log(error.name); // 预期 AbortError
} finally {
  clearTimeout(timer);
}

204 和 205 不能按 JSON 读取

如果另测空响应，204 / 205 不会发送 body，直接 response.json() 会失败。先按状态码判断是否存在正文。错误提示中也应区分 HTTP 错误、客户端取消、网络失败和 JSON 解析失败。

参考资料

Fetch 的响应状态检查与 AbortController 用法可参考浏览器文档。

临时接口的支持范围

最多 5 个响应，每个 body 为有效 JSON 且不超过 16 KiB，delay_ms 为 0–5000，status 为 200–599 且不含 304。配置上传到服务器内存，地址最长保留 30 分钟，重启会提前清除。持有地址的人可读取响应；只放测试数据。请求正文不保存，也不会改变你配置好的响应。

要点总结
  • HTTP 503 不会自动进入 fetch 的 catch。
  • 取消请求不等于服务端返回 408。
  • 用独立接口隔离错误状态和延迟实验。