如何区分fetch请求的网络错误与页面刷新导致的错误？

你可以通过标记页面卸载状态结合网络状态判断来区分这两种场景，只对网络不可达的错误进行用户通知，忽略页面刷新导致的请求中断。

具体实现步骤 #

1. 监听页面卸载事件，标记是否为用户主动刷新/关闭页面
2. 在catch块中先判断是否是页面卸载导致的错误，若是则直接忽略
3. 针对网络类错误进行用户通知

修改后的代码示例 #

let isPageUnloading = false;
// 监听页面卸载事件，标记主动刷新/关闭行为
window.addEventListener('beforeunload', () => {
  isPageUnloading = true;
});

try {
  const response = await fetch(url, payload)
    .then(raw => raw.json());
  console.log("response:", response);
} catch (err) {
  // 忽略页面刷新导致的请求中断
  if (isPageUnloading) {
    return;
  }

  // 判断是否为网络不可达类错误
  if (!navigator.onLine || err.message.includes('Failed to fetch')) {
    alert("网络连接异常，请检查网络设置后重试");
  }
  throw new Error(err);
}

补充说明 #

• beforeunload事件会在页面刷新、关闭、跳转时触发，通过这个事件设置的标记可以准确识别用户主动中断请求的场景
• navigator.onLine可以快速判断当前设备是否处于联网状态，结合错误信息Failed to fetch可以更精准定位网络类错误
• 这种方案兼容性较好，覆盖了绝大多数浏览器环境

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