I'm currently working on an async function that fetches data from multiple sources, waits for all requests to complete, and then returns the JSON results as an array. Here is what I have so far:
file1.js
const searchResults = await Api.search(searchText);
api.js
async function search(searchText) {
return util.executeFetchAll([
`/searchA/${searchText}`,
`/searchB/${searchText}`,
`/searchC/${searchText}`
]);
}
util.js
async function executeFetchAll(urls) {
const promises = urls.map(url => fetch(url));
const responses = await Promise.all(promises);
debugger;
}
As I pause the execution at the debugger and inspect responses using Chrome's developer tools, I can see that it correctly returns an array of 3 Response objects. However, when I try to inspect responses[0].json(), it oddly displays a Promise {<pending>} object in the console.
What could be causing this issue? I thought that by using Promise.all, all promises should be resolved before reaching the debugger line. Why then is the json() method returning a pending Promise object?
Any insights would be greatly appreciated.