javascript - 如何跟踪单个 JavaScript 进程？

Question

标题可能具有误导性，因为我不确定如何用一句话来总结我的问题。
我有一个场景，我的脚本必须将数据并行发布到多个 URL，我正在努力弄清楚如何直观地跟踪每个 URL 发生的情况(即发布的内容和返回的内容)。这是我的代码:

const axios = require('axios');

const postData = async (order_id) => {
    for(let i = 0; i < 10; i++){
        let data = await grabDataFromSomewhere(...);
        await axios.post(`http://example.net/orders/${order_id}`, {data})
            .then(response => {
                //console.log(response.data);
                console.log(i, `POSTING TO http://example.net/orders/${order_id}`);
                console.log("--- Response:", response.data)
            })
    }
}

const orders = ['5f96499a3a19135ad163', '99a3a19135ad1630238', '6499a3a19135ad16302']

orders.forEach(id => {
    postData(id)
})

该脚本在将正确的数据发布到正确的 URL 方面运行良好，但控制台输出显然是一大困惑，因为所有 axios 请求都完成并将其输出转储到同一个控制台。
关注 postData 的每个单独调用的输出的最佳方法是什么？在自己的专用控制台中运行？
对于那些在 Linux 上使用 screen 的人来说，可视化我正在寻找的内容的一个好方法是想象每次调用 postData生成一个新屏幕，我可以随时附加它并查看函数的输出。

Answer 1

我建议使用以下代码。这个想法是并行发出所有请求，但按照它们发出的顺序记录它们。如果您运行以下代码并检查控制台，您将看到响应以随机间隔发生，但它们始终以正确的顺序记录在浏览器中。诀窍是创建一个表示 post 请求的 Promise 映射，然后以这样的方式链接它们:当第一个请求返回时，它被记录，然后当第二个请求返回时，它被记录，依此类推。如果一个请求无序返回，它的 promise 仍然会被解决，但我们只会在它的所有前辈都到达后才记录它。
我意识到这并不是您所要求的，但这就是我试图解决您面临的问题的方式。
此外，您有一个多维数组，因此在将其内容映射到 Ajax 请求之前，我会将其展平为一维数组。
此解决方案基于 Jake Archibald https://web.dev/promises/ 的一篇文章

const orders = ['alpha', 'beta', 'gamma', 'delta', 'epsilon']

function postToAxios(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('in set timeout', data);

      if (data === 'beta') {
        reject('rejected: ' + data);
      } else {
        resolve('resolved: ' + data);
      }
    }, Math.random() * 1000);
  });
}

function createLogEntry(data) {
  const el = document.createElement('div');
  el.className = "log-entry";
  el.textContent = data;
  return el;
}

function createErrorEntry(data) {
  const el = document.createElement('div');
  el.className = "error-entry";
  el.textContent = data;
  return el;
}

orders.map(postToAxios)
  .reduce(function(sequence, promise) {
    return sequence
      .then(function() {
        return promise;
      }).then(function(result) {
        log.append(createLogEntry(result))
      }, function(reason) {
        log.append(createErrorEntry(reason));
      });
  }, Promise.resolve()).then(() => {
    console.log('all done');
  });

.log-entry,
.error-entry {
  margin: 5px;
  border: dotted 1px grey;
  padding: 10px;
}

.error-entry {
  color: red;
  border-color: currentcolor;
}

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