Promise.all 返回 Promise，而不是 .next(...) 中的预期数据负载

Question

我目前正在尝试理解 Promise 和 Promise all。我有一个我想在这里实现的实现，几乎可以工作：

https://codepen.io/c0un7z3r0/pen/GRpPyar

代码是：

const currencyArray = [
  {
    currencyFrom: "USD",
    currencyTo: "GBP",
    urls:[
      "https://jsonplaceholder.typicode.com/todos/1",
      "https://jsonplaceholder.typicode.com/todos/2",
    ]
  },
  {
    currencyFrom: "SGD",
    currencyTo: "USD",
    urls:[
      "https://jsonplaceholder.typicode.com/todos/3",
      "https://jsonplaceholder.typicode.com/todos/4",
    ]
  },
  {
    currencyFrom: "CNY",
    currencyTo: "EUR",
    urls:[
      "https://jsonplaceholder.typicode.com/todos/5",
      "https://jsonplaceholder.typicode.com/todos/6",
    ]
  }
]

async function fetchData(currencyFrom, currencyTo, url) {
  const res = await fetch(url)
  let dataResp = await res.json()
  dataResp = dataResp.map((data) => data)
  let newDataObj = {
    currencyFrom: currencyFrom,
    currencyTo: currencyTo,
    response: dataResp,
  }
  return newDataObj
}

const promises = currencyArray.map((currency) =>
                                   currency.urls.map((url) => {
  return fetchData(currency.currencyFrom, currency.currencyTo, url).then(
    (data) => {
      // console.log(data)
      return data
    })
  })
)

Promise.all(promises)
  .then((data) => data)
  .then((data) => console.log('I expect data, but all I get is Promises, Promises:', data))

我想要实现的是通过currencyArray 中的每个对象进行映射，从currencyArray.url 数组中的每个url 获取数据，然后在所有promise 都已解决时为每个currencyArray 项返回一个类似的对象，例如所以：

[{
    currencyFrom: "USD",
    currencyTo: "GBP",
    responses:[
        // ** DATA FETCHED FROM API CALLS **
    ]

},{
    // ....more objects like the above
}
]

上面的 codepen 实现已经完成了 99%，但是无论我做什么，结果总是返回 [Promise, Promise] 数组。如果我在浏览器控制台中深入研究数组，我实际上可以看到解析的数据，但是尝试在 .then() 中访问此信息已被证明是徒劳的。任何人都可以帮助我理解我做错了什么并可能提供一个可行的例子吗？

我已经搜索了堆栈溢出并尝试了许多替代实现，以上是我管理的最接近工作解决方案的解决方案。 提前感谢您提供的任何帮助。

注意：为了完整起见，这里是我在我的应用程序 (https://codepen.io/c0un7z3r0/pen/ExVGQdK) 中的实际实现，上面的代码笔是修改为使用公共 API 的版本。

Answer 1

问题似乎不在于承诺本身，而在于构建数组的方式。内部映射创建了一个内部承诺集合，但外部映射不直接使用这些承诺。 flatMap 可用于展平集合：

const promises = currencyArray.flatMap(currency =>
  currency.urls.map(url => fetchData(currency.currencyFrom, currency.currencyTo, url))
  );

const currencyArray = [
  {
    currencyFrom: "USD",
    currencyTo: "GBP",
    urls:[
      "https://jsonplaceholder.typicode.com/todos/1",
      "https://jsonplaceholder.typicode.com/todos/2",
    ]
  },
  {
    currencyFrom: "SGD",
    currencyTo: "USD",
    urls:[
      "https://jsonplaceholder.typicode.com/todos/3",
      "https://jsonplaceholder.typicode.com/todos/4",
    ]
  },
  {
    currencyFrom: "CNY",
    currencyTo: "EUR",
    urls:[
      "https://jsonplaceholder.typicode.com/todos/5",
      "https://jsonplaceholder.typicode.com/todos/6",
    ]
  }
]

async function fetchData(currencyFrom, currencyTo, url) {
  const res = await fetch(url),
    dataResp = await res.json(),
    newDataObj = {
    currencyFrom: currencyFrom,
    currencyTo: currencyTo,
    response: dataResp,
  };
  return newDataObj
}

const promises = currencyArray.flatMap(currency =>
  currency.urls.map(url => fetchData(currency.currencyFrom, currency.currencyTo, url))
  );

Promise.all(promises).then(console.log);

Answer 2

Promise.all 在您有一系列承诺 [Promise, Promise, ...] 时有效。在您的情况下，这是一组 Promises [[Promise, Promise], ...]

这就是我合并所有这些值的方式

const promises = [
  [
    new Promise((resolve, reject) => resolve({prop:1})),
    new Promise((resolve, reject) => resolve({prop:2}))
  ],
  [
    new Promise((resolve, reject) => resolve({prop:3})),
    new Promise((resolve, reject) => resolve({prop:4}))
  ],
  [
    new Promise((resolve, reject) => resolve({prop:5})),
    new Promise((resolve, reject) => resolve({prop:6}))
  ]
];

(async() => {
  const result = await Promise.all(promises.map(async pr => await Promise.all(pr)))
  console.log(result);
})()