javascript - 等待页面上的所有 XHR 在 JavaScript 中完成

Question

在我的页面 javascript 文件中，我想在所有 XHR 返回后执行一些脚本。我知道有 ajaxStop() 用于通过 jquery 的 XHR 请求，但由于我使用的是 Mithril 并且它有自己的 Ajax 包装器，所以我不能真正使用 ajaxStop()。我还尝试了一些其他解决方案，例如

function isAllXhrComplete(){
    window.activeAjaxCount--;
    if (window.activeAjaxCount === 0){
        //execute something here.
    }

}

(function(open) {
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
        this.addEventListener("load", isAllXhrComplete());
        open.call(this, method, url, async, user, pass);
    };
})(XMLHttpRequest.prototype.open);


(function(send) {
    XMLHttpRequest.prototype.send = function (data) {
        window.activeAjaxCount++;
        send.call(this, data);
    };
})(XMLHttpRequest.prototype.send);

但似乎由于所有 XHR 调用都是单独触发的，window.activeAjaxCount 将始终为 1 或 0，从而在每个完成的 XHR 请求上触发脚本的执行。

有没有什么好的方法可以等待所有XHR请求返回？

Answer 1

你的错误在这里:

this.addEventListener("load", isAllXhrComplete());

isAllXhrComplete 没有作为回调传递，因为您会立即调用它。而是传递 isAllXhrComplete() 调用的结果。

你必须写:

this.addEventListener("load", isAllXhrComplete);

除此之外，您在包装现有函数时应该非常小心。正确的方法是:

(function(send) {
   XMLHttpRequest.prototype.send = function () {
      window.activeAjaxCount++;
      return send.apply(this, arguments);
   };
})(XMLHttpRequest.prototype.send);

重要的部分是您返回 原始函数的结果，并且您使用apply 传递所有可能的参数。否则，如果更改这些函数的签名，您将来可能会破坏代码。

您需要对 open 包装器执行相同的操作:

(function(open) {
  XMLHttpRequest.prototype.open = function() {
    this.addEventListener("load", isAllXhrComplete);
    return open.apply(this, arguments);
  };
})(XMLHttpRequest.prototype.open);