Подсчет объектов console.log

Question

Приведенный ниже код печатает журнал консоли на странице. Он регистрирует получает и ответы от сервера, как:

14:15:17 GMT+0000 (GMT Standard Time) Submitting HTTP GET request to http... 
14:15:22 GMT+0000 (GMT Standard Time) Received HTTP response: {.. 
14:15:17 GMT+0000 (GMT Standard Time) Submitting HTTP GET request to http... 
14:15:22 GMT+0000 (GMT Standard Time) Received HTTP response: {.. 

Вместо отображения их на странице я хотел бы рассчитывать каждый ответ и запрос таким образом вы видите аа номер, начинающийся с 1 и заканчивая, когда оно заканчивается, может быть любое количество , Это должно показать пользователю, что что-то происходит, не показывая им весь ответ и не получая данные.

 function logHttpResponse(response) { 
     var now = new Date(); 
     var logger = document.getElementById('log'); 
     var logMessage = now.toTimeString() + " Received HTTP response: " + JSON.stringify(response); 
     console.log = function (logMessage) { 
      if (typeof logMessage == 'object') { 
       logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(logMessage) : String(logMessage)) + '<br />'; 
      } else { 
       logger.innerHTML += logMessage + '<br />'; 
      } 
     } 
    } 

и HTML:

<div id="log"></div> 

Answer 1

Если вы просто хотите, чтобы переопределить console.log для печати количества ответов, это должно сделать это, но это будет увеличивать счетчик для любого console.log вызова.

var logCount = 0 

console.log = function (logMessage) { 
    var logger = document.getElementById('log'); 
    logCount++; 
    logger.innerHTML = logCount; 
} 

Если вы хотите, чтобы рассчитывать на ответы и не все журналы консоли, использовать что-то вроде этого

var logCount = 0 

function logHttpResponse(response) { 
    var logger = document.getElementById('log'); 
    logCount++; 
    logger.innerHTML = logCount; 
} 

Answer 2

Ваш вопрос не совсем ясно для меня, но и от того, что я понимаю, что вы пытаетесь сообщить о состоянии каждого запроса открытого HTTP. Я предлагаю вам обернуть ваш запрос с функцией, которая делает подсчет, как это:

var globalCounter = 1; 
function performHttpRequest(requestUrl) { 
    // Store a local copy of the counter for this request 
    var currentCounter = globalCounter++; 

    // Log to the user in whatever way you see fit 
    // Could also for instance be with an array of status objects 
    logger.innerHTML += 'now starting request ' + currentCounter + '</br>'; 

    // Perform the async request using the framework you prefer 
    return $http.get(requestUrl) 
     .then(function(result) { 
      // When the async request finishes, update the log with the counter 
      // we saved earlier 
      logger.innerHTML += 'request ' + currentCounter + ' finished</br>'; 

      // Make sure to return the result of the action to the calling 
      // function. 
      return result; 
     }); 
} 

В приведенном выше примере используется Угловым в качестве основы для выполнения фактического запроса HTTP, но это было бы просто, как хорошо работать на JQuery или любой другой структуры.

Answer 3

Вы можете использовать PerformanceObserver с entryTypes, установленным на "resource". Вызвать .getEntries() по первому параметру при обратном вызове PerformanceObserverEntryList, перебирать объект с помощью цикла for..of. Вызвать .toJSON() на объект записи, передать объект Object.entries() для итерации каждого свойства, значения текущего объекта ввода в вложенном for..of циклах.

const observer = new PerformanceObserver((list, obj) => { 
    for (let entry of list.getEntries()) { 
    for (let [key, prop] of Object.entries(entry.toJSON())) { 
     logger.innerHTML += ` ${key}:${prop} `; 
    } 
    } 
}); 

observer.observe({ 
    entryTypes: ["resource"] 
});