Javascript 当所有xmlHttpRequests都完成时执行函数

简介

我有一个从API获取数据的网站。因此，一旦网站打开，它就会向服务器发出一些post和get请求。假设页面加载后，它会生成5个不同的xmlHttpRequests，但我们无法确切知道每个调用从开始到完成所需的时间

例如

对一个端点的调用需要2秒才能完成，而对另一个端点的调用需要1秒才能完成。因此，这意味着在2秒钟后，两个调用都被称为完成

待办事项

我想在所有xmlHttpRequests都完成后执行一个函数，因为我使用的是window.performance.getEntries（）获取网页发起的所有请求并将其发送到我的服务器，因为我正在执行一个web分析项目，在该项目中，我需要访问每个网络请求所花费的时间，并将数据转换为图表

额外问题或提示

是否有任何事件可以连接到如下所示的窗口，以侦听所有网络调用，并在所有调用完成后执行我的代码段

      window.addEventListener("load", function (event) {
       //execute some code here
      }

在load事件中，我无法使用performance.getEntries（）捕获所有请求，因为load在ajax调用完成之前触发

      window.addEventListener("load", function (event) {
       //execute some code here
      }

---

如上所示，我问。JavaScript中是否有任何技巧、事件或任何东西可以让我们等待所有XMLHTTPREQUESTS完成，然后执行一些代码。

我建议您将请求包装在承诺中，然后使用

承诺。所有（…）

如下：

const makeRequest = () => {
    return new Promise((resolve, reject) => {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                resolve(xhttp.responseText); // On success, resolve the promise
            } else {
                reject(); // On failure, reject it
            }
        };
        xhttp.open("GET", "filename", true); // Needs to be set to your needs. This is just an example
        xhttp.send();
    });
}

// This waits until all promises are resolved
const [result1, result2] = await Promise.all(makeRequest(), makeRequest());

// do stuff here with your results
console.log(result1);
console.log(result2);

PS：基本的Ajax示例来自，但只需将其替换为您的，并创建参数或类似参数，以发出您实际需要的请求

或

---

您可以将Axios这样的库用于Ajax请求，默认情况下，它已经返回了承诺。在这里查看：

工作解决方案

我们可以使用以下代码跟踪浏览器AJAX调用：

  const ajaxCallStatus = () => {
   window.ajaxCalls = 0; // initial ajax calls
   window.ajaxEndpoints = []; // keeping track of all ajax call urls (endpoints) 
   const origOpen = XMLHttpRequest.prototype.open;
   XMLHttpRequest.prototype.open = function() {
   window.ajaxCalls++;
   this.addEventListener('load', (event) => {
    if (!window.ajaxEndpoints.includes(event['currentTarget'].responseURL)) {
      window.ajaxEndpoints.push(event['currentTarget'].responseURL);
    }
    window.ajaxCalls--;
    switch (window.ajaxCalls) {
    case 0: // when ajax calls finish this runs
      addData(window.ajaxEndpoints);
    break;
    }
     });
    origOpen.apply(this, arguments);
    }
   }

添加数据功能-用于向某些后端发送数据

function addData(arr, origOpen) { 
   XMLHttpRequest.prototype.open = origOpen;
   axios.post('url', data)
  .then((res) => console.log(res))
  .catch((err) => console.log(err));
}

---

让我们假设我是一个网络分析软件服务提供商，我不能告诉我的用户将网络呼叫包装成一个

承诺。相反，我想提供一个脚本标记，它可以添加到他们的html文件中，并自动加载到网页中，在该脚本标记中，我已经设置了所有事件侦听器。例如，DOMContentLoaded等。那么是否有任何事件或方式可以满足我的需求？是否需要侦听所有已完成的xmlhttp请求没有可靠的方法可以做到这一点，因为XMLHttpRequests根据定义是异步的。您不能等待初始加载，因为总有新的加载或类似的加载。如果他们能被识别，那可能是另一个故事，但仅仅从你告诉我的，这听起来是不可能的。您可能希望签出此：。也许这符合你的需要。向下滚动到xmlhttp部分@basitmir