You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何处理因页面导航导致的Fetch请求“Failed to fetch”错误

如何处理因页面导航导致的Fetch请求“Failed to fetch”错误

嘿,这个场景我之前在项目里碰到过,刚好有个实用的方法可以帮你精准区分这类错误~

首先得明白:当用户在Fetch请求还没完成时就跳转到其他页面,浏览器会直接中止这个未完成的请求,这时候抛出的“Failed to fetch”其实属于浏览器主动中止类错误,和普通的网络故障(比如断网、请求超时)是不一样的。

要精准捕获这个特定错误,关键是在catch块里判断错误的类型:这类因导航中止的错误本质是一个DOMException,它的name属性会是"AbortError"。我们可以利用这个特性来做区分,代码示例如下:

fetch("https://xxx.yyy/")
  .then(response => {
    // 这里处理正常的响应逻辑
    return response;
  })
  .catch(error => {
    // 精准判断是否为页面导航导致的请求中止
    if (error.name === "AbortError") {
      // 这里可以选择忽略这个错误,或者做你需要的特定处理
      console.log("请求因页面导航被中止,无需额外处理");
    } else {
      // 处理其他类型的网络错误(比如真实的请求失败)
      console.error("非导航导致的网络错误:", error);
    }
  });

需要注意的是,虽然不同浏览器的错误描述文本可能略有差异,但error.name === "AbortError"是符合标准的判断方式,能稳定识别这类浏览器中止的情况——包括页面导航、用户刷新页面等导致的请求中断。

备注:内容来源于stack exchange,提问作者rap-2-h

火山引擎 最新活动