在完成之前中止请求时 Firefox 上的 NetworkError

Posted 2023-02-22

【中文标题】在完成之前中止请求时 Firefox 上的 NetworkError

【英文标题】：NetworkError on Firefox when aborting request before completion

【发布时间】：2019-12-11 14:14:11

【问题描述】：

我正在做类似的事情：

fetch(url, ...)
.then(...)
.catch(e => 
  // Handle error here
);

然而，在 Firefox 上，每当我导航到另一个页面的速度过快（即所有请求都没有完成）时，它会抛出一个错误，这将触发 UI 中的错误处理

TypeError：“尝试获取资源时出现网络错误”

我在这里找到了有关此主题的讨论，但暂时还没有提供解决方法。

https://bugzilla.mozilla.org/show_bug.cgi?id=1280189

想知道是否有任何方法可以检测浏览器的中止，并优雅地处理它。

我见过类似的问题，但所有这些似乎都与 CORS 有关，并且与这个问题不同。

编辑：在前面提到的票中复制：

window.onbeforeunload = function(event) 
console.log("navigating away")

;
console.log("starting")
fetch("https://jsfiddle.net/").then(x => 
  console.log("fetched")
).catch(e => 
  console.log("caught", e)
)
window.location = "https://jsfiddle.net/";

返回：

caught TypeError: "NetworkError when attempting to fetch resource."

【问题讨论】：

您现在可以在这里使用 AbortController 方法：developer.mozilla.org/en-US/docs/Web/API/AbortController - 这与 axios 的 .cancel() 方法非常相似。本文详细介绍了 AbortController 与 fetch 的使用 - itnext.io/…

@InchHigh 我已经尝试过这种方法，但是当我离开时 Firefox 不会引发 AbortError。在显式调用中止控制器的演示中，一切正常，因此Firefox实际上不使用中止控制器，或者其他原因。唯一的替代方案是在每次导航离开时调用 AbortController 的重构吗？

【参考方案1】：

经过一番反复，我设法实现了英寸高中止控制器方法 - developer.mozilla.org/en-US/docs/Web/API/AbortController