Clash Royale CLAN TAG#URR8PPP

Promise.all() not always resolved - edited to add the code for both functions

I'm using the following code to update the state but the Promise.all() array isn't always resolved before the final function is called. Sometimes, the entire array is populated but it usually isn't.

I'm logging the Promise.all() array to the console just so I can see what's happening. What is really peculiar is the state is always updated properly but calling the individual elements in the array often returns "undefined". I need to use the individual elements to create a new array for displaying later which is why I'm accessing them.

Please help me either figure out how to access the array when it's finished updating or a better way to process the entire thing.

class X
componentDidMount()
const numTiles = 3;

for (let i = 0; i < numTiles; i++)
Promise.all([
this.fetchSong(), // returns JSON from SQLite DB
this.fetchArtists(), // returns JSON from SQLite DB
])
.then(values =>
this.testing(values);
);



testing(arr)
console.log("arr: ", arr);
console.log("arr[0]: ", arr[0]);
console.log("arr[0].id: ", arr[0].id);
console.log("arr[0].name: ", arr[0].name);
console.log("arr[0].artist: ", arr[0].artist);
console.log("arr[1]: ", arr[1]);
console.log("arr[1][0]: ", arr[1][0]);
console.log("arr[1][1]: ", arr[1][1]);
console.log("arr[1][0].artist: ", arr[1][0].artist);
console.log("arr[1][1].artist: ", arr[1][1].artist);




Edit: code for fetchSong() and fetchArtists() added.

fetchSong()
let id = Math.floor(Math.random() * 2000) + 1; // get random number for id
return new Promise((resolve, reject) =>
Bingo.getSong(id).then(song =>
resolve(song);
);
);


fetchArtists()
return new Promise((resolve, reject) =>
let arr = ;
for (let j = 0; j < 2; j++)
let id = Math.floor(Math.random() * 10) + 1;
Bingo.getArtist(id).then(artist =>
arr.push(artist);
);
resolve(arr);
;
);



The console screenshot below shows the Promise.all() array has been populated but the array elements are still missing.

.fetchArtists()

arr[1]

.fetchSong()

.fetchArtists()

1 Answer
1

The problem is in the implementation of fetchArtists, which resolved before any of the single-artist-fetching promises were resolved.

fetchArtists

I've also simplified fetchSong, but the gist of fetchArtists now is you store the promises that will resolve to single artists, then wait for all of them to resolve. There's no reason to add a .then() there, since as you know, Promise.all() will resolve with an array of resolved values anyhow.

fetchSong

fetchArtists

.then()

Promise.all()

fetchSong()
const id = Math.floor(Math.random() * 2000) + 1;
return Bingo.getSong(id);


fetchArtists()
const fetchPromises = ;
for (let j = 0; j < 2; j++)
const id = Math.floor(Math.random() * 10) + 1;
fetchPromises.push(Bingo.getArtist(id));

return Promise.all(fetchPromises);



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.