如何强制浏览器中止所有 XHR 请求

Question

在我的网站中，我有一个页面将一些 XHR requests 发送到同一台服务器，问题是如果用户单击任何 link 以导航到同一台服务器上的任何其他页面，浏览器阻塞并等待所有 XHR 先完成，然后导航，这可能需要大约 10 秒。

我只实现了, it's working but the browser still waiting for XHR responses. In my opinion xhr.abort() is only to prevent calling xhr.onload()，但实际上浏览器还在等待XHR的响应。

如何使用 JavaScript 强制浏览器立即关闭并销毁 XHR 请求？

代码是 .

的复制粘贴

所有这一切都发生在同一台服务器上。如果我导航到另一台服务器，浏览器会立即导航，而如果 link 在同一台服务器中，浏览器首先等待完成所有 XHR 请求。

Answer 1

问题是浏览器限制了对单一来源的请求数量，显然在导航时，Chrome（至少）等到它可以请求新页面，然后再拆除旧页面，导致延误。（相比之下，在我的测试中，Firefox 不会等待。）

如果您在离开页面时取消未完成的请求，它们将停止阻止浏览器导航。例如，如果您通过包装函数发出请求：

const requests = new Set();
function request(...args) {
    const xhr = new XMLHttpRequest(...args);
    xhr.addEventListener("load", removeRequest);
    xhr.addEventListener("error", removeRequest);
    requests.add(xhr);
    return xhr;
}
function removeRequest() {
    requests.delete(this);
}

...然后在离开页面时取消它们：

window.onbeforeunload = () => {
    for (const xhr of [...requests]) {
        xhr.abort();
        requests.delete(xhr);
    }
};

这解决了问题（对我来说，使用 Chrome；它也适用于 Firefox，但 Firefox 一开始并没有阻止它）。

考虑到现代浏览器对其施加的所有限制，我不确定 onbeforeunload 是否有效，但它确实有效，我猜取消一个请求不会尝试开始新事物，也不会花太长时间，所以这是有道理的。

如何强制浏览器中止所有 XHR 请求

How to force browser to abort all XHR requests

javascript

browser

xmlhttprequest