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() resolvesstoreData()resolves once newDataArray is returnednewDataArray 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;
};
newData is a promise, but you're not awaiting the promise. Instead, you're awaiting an array of objects {id: item.id, data: newData } that has the promise inside it. 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.
Then, the return from inside the async callback will cause that value to become the resolved value of the promise that the async function is returning.
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.