如何处理因页面导航导致的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




