当所有xmlHttpRequests完成时执行函数 [英] Execute A Function When All xmlHttpRequests Are Complete

问题描述

BRIEF

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

I have a website which gets data from an API. So it makes some post and get requests to a server once the website is opened. Let us assume it makes 5 different xmlHttpRequests as soon as the page loads but we cannot exactly know the time each call takes from start to finish.

示例

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

Call to one endpoint takes 2 seconds to complete and the other one takes 1 second to complete. So that means after 2 seconds both the calls are said to be finished.

待办事项

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

I want to execute a function after all the xmlHttpRequests are complete because I am using window.performance.getEntries() to fetch all the requests initiated by the webpage and send it to my server as I am doing a web analytics project in which I need to access the times taken by each network request and convert the data into a chart.

其他问题或提示

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

Is there any event that can be attached to the window as shown below to listen for all the network calls and execute my piece of code when all are finished.

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

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

In the load event I am not able to capture all the requests by using performance.getEntries() because load fires before the ajax calls are finished.

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

As shown above I ask. Is there any trick or any event or anything in JavaScript by which we can wait untill all the XMLHTTPREQUESTS are finished and then execute some code.

推荐答案

工作解决方案

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

We can track browser AJAX calls using the code below :

  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);
    }
   }

添加数据功能-用于将数据发送到某些后端.

ADD DATA FUNCTION - Used for sending data to some backend.

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

这篇关于当所有xmlHttpRequests完成时执行函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！