Блог

КРАТКОЕ

У меня есть веб-сайт, который получает данные из API. Таким образом, он отправляет некоторые запросы post и get на сервер после открытия веб-сайта. Давайте предположим, что она выполняет 5 разных XMLHttpRequests сразу после загрузки страницы, но мы не можем точно знать, сколько времени занимает каждый вызов от начала до конца.

НАПРИМЕР

Выполнение вызова одной конечной точки занимает 2 секунды, а другой — 1 секунду. Таким образом, это означает, что через 2 секунды оба вызова считаются завершенными.

TO-DO

Я хочу выполнить функцию после того, как все 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));
}
  

Я бы посоветовал вам обернуть ваши запросы в promises, а затем использовать Promise.all(...) вот так:

 const makeRequest = () => {
    return new Promise((resolve, reject) => {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 amp;amp; 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, которая уже возвращает обещания по умолчанию. Проверьте это здесь:https://github.com/axios/axios