Promise.all 返回 Promise，而不是预期的数据有效载荷 in.next(...)

Question

I am currently trying to understand Promises and Promise all. I have an implementation of what I want to achieve here that almost works:

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

The code is:

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

What I want to acheive is to map through each object in the currencyArray, fetch the data from each url in the currencyArray.url array then return a similar object for each of the currencyArray items when all of the promises have resolved, like so:

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

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

The codepen implementation above get 99% of the way there however no matter what I seem to do, the result always returns [Promise, Promise] array. If I drill down into the array in the browser console I can actually see the resolved data however trying to access this information in.then() has proven fruitless. Can anybody help me understand what I am doing wrong and possibly provide a working example?

I've scoured stack overflow and tried many alternative implementations and the above is the closest to a working solution I have managed. Thanks in advance for any help you can provide.

NOTE: For completeness, here is the actual implementation I have in my application ( https://codepen.io/c0un7z3r0/pen/ExVGQdK ), the codepen above is a stubbed in version modified to use a public API.

Answer 1

The problem doesn't seem to be in the promises themselves, but in the way the array is built. The inner map creates an inner collection of promises, but the outer map does not use those promises directly. flatMap can be used to flatten the collection:

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 works when you have an array of promises [Promise, Promise, ...] . In your case this is array of array of Promises [[Promise, Promise], ...]

This is how I would merge all those values

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