当所有xmlHttpRequests完成时执行函数

问题描述

BRIEF

我有一个网站，可以从API获取数据。因此，一旦网站打开，它就会发出一些帖子并向服务器发送请求。让我们假设页面加载后，它会产生5个不同的 xmlHttpRequests ，但是我们无法确切知道每次调用从开始到结束所花费的时间。

示例

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

待办事项

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

其他问题或提示

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

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

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

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

解决方法

工作解决方案

我们可以使用以下代码跟踪浏览器 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));
}

,

我建议您将请求包装在promise中，然后像这样使用Promise.all(...)：

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示例来自here，但只需将其交换给您，并创建参数或类似参数即可发出您实际需要的请求

OR

您可以使用Axios之类的库来处理Ajax请求，默认情况下该库已返回Promises。在此处查看：https://github.com/axios/axios