区分网络错误与页面刷新导致的Fetch异常处理 #你可以通过标记页面卸载状态结合网络状态判断来区分这两种场景，只对网络不可达的错误进行用户通知，忽略页面刷新导致的请求中断。
具体实现步骤 #监听页面卸载事件，标记是否为用户主动刷新/关闭页面在catch块中先判断是否是页面卸载导致的错误，若是则直接忽略针对网络类错误进行用户通知修改后的代码示例 #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