JavaScript AbortSignal.timeout 怎样取消超时请求

如果一个 fetch() 请求不能无限等待，可以直接把 AbortSignal.timeout() 生成的信号交给 signal 选项。请求超过指定的活动时间后会自动中止，并以 TimeoutError 进入 catch；用户自己点击取消时，则通常是 AbortError。需要让用户取消和自动超时共用一个请求时，再用 AbortSignal.any() 合并两个信号。

官方参考地址：https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static

核心写法是 fetch(url, { signal: AbortSignal.timeout(5000) })。别只判断“请求失败”，要根据 error.name 区分超时、主动取消和网络异常；HTTP 404/500 还要单独检查 response.ok。

先把超时信号交给 fetch

AbortSignal.timeout(time) 的参数单位是毫秒，返回一个会在指定时间后中止的 AbortSignal。最小可用写法如下：

async function loadProfile(url) {
  try {
    // 超过 5 秒仍未完成时，让 fetch 进入中止状态
    const response = await fetch(url, {
      signal: AbortSignal.timeout(5000),
    });

    // HTTP 404/500 不一定让 fetch reject，所以单独检查状态码
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    // 读取响应体也属于异步过程，仍处在同一个取消边界内
    return await response.json();
  } catch (error) {
    // 根据 reason.name 做用户可理解的提示和后续处理
    if (error.name === "TimeoutError") {
      throw new Error("请求超过等待时间，请稍后重试");
    }
    throw error;
  }
}

这里的“5 秒”不是服务器一定会在 5 秒内返回的承诺，而是客户端愿意等待的上限。MDN 说明这个计时按活动时间计算，页面进入暂停状态或回退缓存时，计时可能暂时停住。

按 reason.name 区分失败原因

对交互来说，“超时”和“用户不想等了”不是同一件事。超时可以提示网络较慢，用户取消则应保持安静或恢复按钮；网络错误还可能是断网、域名解析或跨域配置问题。

async function requestJson(url) {
  try {
    // 自动取消只负责时间边界，不替代 HTTP 状态判断
    const response = await fetch(url, {
      signal: AbortSignal.timeout(8000),
    });
    if (!response.ok) {
      // 服务端返回 4xx/5xx 时，保留状态码方便界面分类
      throw new Error(`HTTP ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (error.name === "TimeoutError") {
      return { kind: "timeout", message: "服务器响应较慢" };
    }
    if (error.name === "AbortError") {
      return { kind: "cancelled", message: "请求已取消" };
    }
    // TypeError 常见于网络失败或运行环境不支持该能力
    if (error.name === "TypeError") {
      return { kind: "network", message: "网络不可用或浏览器不支持" };
    }
    return { kind: "http-or-other", message: error.message };
  }
}

不要把所有异常都改写成“请求超时”。另外，fetch() 在收到 HTTP 错误状态时仍可能返回 Response，因此状态码判断应放在 await fetch() 成功之后。

用 AbortSignal.any 合并两个取消入口

当页面既有“取消”按钮，又需要自动超时，可以让用户控制器和超时信号共同进入 AbortSignal.any()。传给 fetch() 的只有合并后的信号，业务层仍然只维护一个取消边界。

async function loadWithCancel(url, onState) {
  const controller = new AbortController();
  // 用户按钮可以拿到这个控制器并调用 controller.abort()
  const timeoutSignal = AbortSignal.timeout(10000);
  const signal = AbortSignal.any([controller.signal, timeoutSignal]);

  onState({ status: "loading", cancel: () => controller.abort() });

  try {
    // 任意一个输入信号中止，fetch 都会拒绝
    const response = await fetch(url, { signal });
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    onState({ status: "success", data });
  } catch (error) {
    // 第一个发生的取消原因会保留在合并信号的 reason 上
    if (error.name === "TimeoutError") {
      onState({ status: "timeout" });
    } else if (error.name === "AbortError") {
      onState({ status: "cancelled" });
    } else {
      onState({ status: "error", message: error.message });
    }
  }
}

如果用户在第 3 秒点击取消，就应显示“已取消”；如果一直没有操作，10 秒后才显示“等待超时”。这两个状态不要共用同一条错误文案，否则用户会误以为点击取消没有生效。

界面状态与常见边界

• 加载中：禁用重复提交，保留一个明确的取消入口；取消后恢复按钮，而不是显示红色系统错误。
• 超时：提示可以重试，但不要暗示服务端一定宕机；超时只说明客户端等待边界已到。
• 响应体读取：即使响应头已经拿到，读取 response.json() 期间仍可能被信号中止。
• 监听器生命周期：AbortSignal.timeout() 本身没有取消定时器的方法。若代码长期给信号挂监听器，要在不需要时移除；必须明确清理计时器时，可改用 AbortController 配合 setTimeout() 和 clearTimeout()。
• 兼容性：现代浏览器已普遍支持该静态方法，但面向旧环境时可以捕获 TypeError，并提供不使用超时信号的降级请求策略。

相关问题

AbortSignal.timeout 的单位是什么？是毫秒，且必须在 0 到 Number.MAX_SAFE_INTEGER 范围内。

为什么 404 没有进入 catch？因为 HTTP 错误响应仍可能让 fetch() 成功返回，需要主动检查 response.ok 或 response.status。

用户取消为什么不是 TimeoutError？用户控制器触发的是主动中止，通常以 AbortError 表示；只有自动超时信号到期才对应 TimeoutError。