将 Promise.all 解析为数组或对象的一部分答案

【问题标题】：Resolving Promise.all with a promise as part of array or object将 Promise.all 解析为数组或对象的一部分
【发布时间】：2018-03-11 01:59:50
【问题描述】：

我正在尝试将一堆异步调用排队以并行触发。但是，我正在排队的承诺有额外的数据，我想与承诺值一起保留。

我的问题是：如何传递一个包含承诺的对象或数组，并让承诺解析为对象内的值？

例如，让我们生成一个普通的 Promise 数组：

async function asyncFunction(input) {
  return input * 10;
}

async function main() {
  var promises = [];
  for (let i = 0; i < 10; i++) {
    promises.push(asyncFunction(i));
  }

  var result = await Promise.all(promises);
  
  document.getElementById('output').innerText = JSON.stringify(result);
}

main();

&lt;div id='output'&gt;&lt;/div&gt;

这工作得很好。但是现在如果我们尝试将承诺放入一个带有一些元数据的对象中：

async function asyncFunction(input) {
  return input * 10;
}

async function main() {
  var promises = [];
  for (let i = 0; i < 10; i++) {
    promises.push({
      id: i,
      value: asyncFunction(i)
    });
  }

  var result = await Promise.all(promises);
  
  document.getElementById('output').innerText = JSON.stringify(result);
}

main();

&lt;div id='output'&gt;&lt;/div&gt;

value 中的值是一个承诺，而不是解析后的值。

我的预期输出是：

[{"id":0,"value":0},{"id":1,"value":10},{"id":2,"value":20},...]

【问题讨论】：

标签： javascript promise

【解决方案1】：

您可以推送解析为您想要的格式的承诺：

async function asyncFunction(input) {
  return input * 10;
}

async function main() {
  let promises = [];

  for (let i = 0; i < 10; i++) {
    promises.push(
      asyncFunction(i).then(value => ({
        id: i,
        value,
      }))
    );
  }

  let result = await Promise.all(promises);
  
  console.log(result);
}

main();

【讨论】：

感谢这回想起来是有道理的，但我相信我误解了一些东西，让我觉得我的代码也可以工作。是不是我传递的东西不是直接的承诺列表给Promise.all？
@ShawnTabrizi：是的。 Promise.all 将任何看起来不像 Promise 的东西视为立即解决，而 {id: <number>, value: <promise>} 看起来不像 Promise。

【解决方案2】：

您可以映射承诺数组并等待包含要解决的承诺的值键

    async function asyncFunction(input) {
      return input * 10;
    }

    async function main() {
      var promises = [];
      for (let i = 0; i < 10; i++) {
        promises.push({
          id: i,
          value: asyncFunction(i)
        });
      }

      var result = await Promise.all(promises.map(async (promise) => ({
        id: promise.id,
        value: await promise.value
      })));

      document.getElementById('output').innerText = JSON.stringify(result);
    }

    main();

【讨论】：