I'm having difficulty understanding why I still have pending promises after awaiting Promise.all().

In the example below, I'm creating an array of promises by calling an async function on each element of an array, using .map().

Now, why is the promise still showing as pending? The way I (mis)understand it right now:

• then() fires once the promise from storeData() resolves
• storeData()resolves once newDataArray is returned
• newDataArray is returned once all promises inside the promisesArray are resolved or once the first one rejects.

storeData(OldDataArray).then(values => console.log(values))
// console shows:
// { id: 1, data: Promise { <pending> } },
// { id: 2, data: Promise { <pending> } }

const storeData = async (OldDataArray) => {
  try {
      const promisesArray = OldDataArray.map((item) => {
      let newData = downloadMoreDetails(item.id, item.group); //async function, see below
      return {
        id: item.id,
        data: newData,
      };
    });
    const newDataArray = await Promise.all(promisesArray);  // <-- I'm awaiting all promises to complete before assigning to newDataArray
    return newDataArray;
  } catch (error) {
    console.log(error)
  }
};

const downloadMoreDetails = async (id, group) => {
  const response = await fetch(
    `example.com/id/group.xml`
  );
  if (!response.ok) {
    throw new Error(`HTTP error ${response.status}`);
  }

  const str = await response.text();
  const json = convert.xml2json(str, {
    compact: true,
    spaces: 2,
  });
  return json;
};

CodePudding user response：

newData is a promise, but you're awaiting an array of {id: item.id, data: newData }. Promise.all() doesn't look inside those objects to find the promise and wait for that promise. It just sees an array of plain objects which means it has nothing to do. You can fix that by doing this:

const storeData = async (OldDataArray) => {
  try {
    const promisesArray = OldDataArray.map(async (item) => {
        let newData = await downloadMoreDetails(item.id, item.group); //async function, see below
        return {
          id: item.id,
          data: newData,
        };
    });
    return Promise.all(promisesArray);
  } catch (error) {
    // log and rethrow error so the caller gets the rejection
    console.log(error);
    throw error;
  }
};

This changes the .map() callback to be async. That does two beneficial things. First, it means the resulting array from .map() will be an array of promises since the async callback always returns a promise. And, second, it allows you to use await inside the callback so you can populate your returned object with the actual data, not with a promise.

Note, you could have also done it without adding the async/await like this:

const storeData = (OldDataArray) => {
    const promisesArray = OldDataArray.map((item) => {
       return downloadMoreDetails(item.id, item.group).then(newData => {
          return {
            id: item.id,
            data: newData,
          };
       });
    });
    return Promise.all(promisesArray).catch(error => {
      // log and rethrow error so the caller gets the rejection
      console.log(error);
      throw error;
    });
};

In this version, you directly return a promise from the .map() callback and you make sure that promise resolves to your data object.