计算 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>

- Tom Rudge

---

每次调用logHttpResponse时，您都在分配给console.log。首先，我认为您不应该重新分配console.log，但无论如何，您应该只在函数外部执行一次（并将logger作为闭包参数传递）。 - Tatsh

在执行Tatsh所建议的操作之后，有什么阻碍你像你对logMessage一样在闭包中加入一个计数器？ - Mike Cluck

如果您在logHttpResponse()函数之外定义了一个变量，并在函数内将其增加1，那么您可以在logMessage中设置它。 - Manoj Lodhi

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

- gafi

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

上面的示例使用Angular作为框架来执行实际的http请求，但它同样适用于jQuery或任何其他框架。

- Robba

Answer 3

您可以使用PerformanceObserver并将entryTypes设置为"resource"。在回调函数PerformanceObserverEntryList的第一个参数上调用.getEntries()，使用for..of循环迭代entries对象。在嵌套的for..of循环中，对每个属性调用.toJSON()来遍历每个属性，并获取当前条目对象的值，然后将此对象传递给Object.entries()。

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

- guest271314