javascript - 异步/等待内部 for...of 与 map

Question

我试图弄清楚为什么 promises 在 for...of 中的工作方式似乎不同。与 map() .

data是 {app: MY_APP, link: MY_LINK} 形式的对象数组.我正在尝试将其转换为 {app: MY_APP, status: true OR false}} 形式.函数 checkLink()是异步的，因为它使用 node-fetch并基本上返回给定链接是否为 200。使用 for...of ，我得到了想要的对象:

let objToSend = [];
for (obj of data) {
  objToSend.push({ app: obj.app, status: await checkLink(obj.link) });
}

// returns [{app: MY_APP, status: true}, ...]

但使用 map ，如下所示，我得到了一系列未决的 promise 。任何帮助将不胜感激:

let objToSend = data.map(async obj => {
  return {
    app: obj.app,
    status: await checkLink(obj.link)
  };
});

// returns [ Promise { <pending> }, ...]

我也试过做 Promise.all(objToSend)在map之后代码，但它返回 Promise { <pending> }

Answer 1

我会把解释留给其他答案，但只想指出也存在性能差异。

您的第一个解决方案在每次迭代中等待 promise 解决。如果前一个已解决，则仅调用 checkLink。这是一个顺序解决方案。

check link1 => wait => check link2 => wait => check link3 => wait

第二个解决方案遍历每个元素并发出请求，而不等待 promise 解决(因此返回一个 promise 数组)。如果您等待所有 promise 都得到解决，您会发现此解决方案要快得多，因为请求是并行发送的。

check link1 => check link2 => check link3 => wait for all

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function checkLink(link) {
  await sleep(Math.random() * 1000 + 500); // sleep between 500 and 1500 ms
  console.log(link);
  return `status #${link}`;
}

(async function () {
  const data = new Array(5).fill().map((_, index) => ({ app: "app", link: index }));
  let objToSend;
  
  console.log("solution #1");
  objToSend = [];
  for (let obj of data) {
    objToSend.push({ app: obj.app, status: await checkLink(obj.link) });
  }
  console.log(objToSend);

  console.log("==============================================");
  
  console.log("solution #2");
  objToSend = await Promise.all(data.map(async obj => {
    return {
      app: obj.app,
      status: await checkLink(obj.link)
    };
  }));
  console.log(objToSend);
})();

在代码片段中，第一个解决方案耗时 500/1500 * 5 = 2500/7500，时间在 2500 到 7500 毫秒之间。而第二种解决方案需要 500 到 1500 毫秒(取决于要解析的最慢值)。