如何判断JavaScript中fetch()请求已完成发送阶段并立即中止该请求

这个需求太常见了——尤其是做Chrome扩展这类需要快速触发第三方接口又不想等响应的场景，我之前做统计类工具时也踩过类似的坑。你的定时器方案确实有局限性，网络或设备波动很容易导致请求还没发出去就被掐断，下面给你两个更靠谱的方案：

方案一：用navigator.sendBeacon()（最优解） #

这个API简直是为你的场景量身定做的！它是浏览器专门为"无需等待响应的异步请求"设计的，比如日志上报、计数器递增这类场景。它的优势在于：

• 浏览器会在后台异步发送请求，完全不阻塞主线程，对用户体验零影响
• 即使页面被卸载（比如用户关闭标签页），浏览器也会尽力完成请求发送
• 不需要手动处理中止逻辑，因为本来就不关心响应

如果你的第三方服务器接受POST请求，直接调用就行：

function incrementCounter(url) {
  navigator.sendBeacon(url);
}

如果服务器只接受GET请求，你可以通过Request对象指定请求方法：

function incrementCounter(url) {
  const getRequest = new Request(url, { method: 'GET' });
  navigator.sendBeacon(getRequest);
}

方案二：优化Fetch请求，确保请求发送后再中止 #

如果你因为某些原因必须用Fetch，那可以利用Fetch的特性：当fetch()返回的Promise被resolve时，说明浏览器已经收到了服务器的响应头——这就意味着请求已经成功发送到服务器，计数器已经完成累加了，这时候再中止请求就不会有问题。

修改后的代码如下：

async function incrementCounterWithFetch(url) {
  const controller = new AbortController();
  try {
    // 等待Fetch返回响应头（这时候服务器已经收到请求了）
    const response = await fetch(url, { signal: controller.signal });
    // 立刻中止请求，不用下载响应体
    controller.abort();
  } catch (err) {
    // 只需要忽略AbortError，其他错误可以按需处理
    if (err.name !== 'AbortError') {
      console.error('计数器递增请求失败:', err);
    }
  }
}

这个方案比定时器靠谱得多，它不依赖固定的时间阈值，而是根据请求的实际发送状态来决定中止时机，完美解决了网络慢或设备卡顿导致的请求未发送问题。

为什么你的原方案会失效？ #

你用固定100ms定时器中止的问题在于：网络请求的发送时间是不可预测的——如果网络延迟高或者设备CPU繁忙，100ms内请求可能还没完成TCP握手和请求发送，这时候中止AbortController会直接取消整个请求，服务器根本收不到。

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