Promise.all in loop, one by one. Await until function fully completed

Question

I'm trying to resolve promises one by one, but i don't understand how to. I want to wait till video message load fully then move to another promise, otherwise it freeze browser. In my code example it don't wait until video hit loadedmetadata event, and go to next promise. And after all promises executed, load's all videos. How it looks: https://prnt.sc/10mg4oc

//All messages loop
for (var i = 0; i < data[0].length; i++) {
let urls = [];
$.each(file_id.split(','), function( index, value ) {
   file_id = value;
   urls.push("//localhost/storage/"+data[0][i].user_id+"/"+data[0][i].file_cluster_id+"/"+value)
});
   //Get chunks array from file cluster
   let chunkPromises = urls.map(function callback(url,index) {
      return fetch(url).then((res) => {
         return res.arrayBuffer();
      });
   });
   console.log(chunkPromises);
   console.log(0);
   //I'm trying to understand how to do it
   (async function loop() {
      await Promise.all(chunkPromises).then(chunks => {
         console.log(chunks);
         console.log(1);
         //Appending file chunks to file back
         for (const value of chunks) {
            console.log(2);
         }
      video.attr('src', URL.createObjectURL(full_video));
      console.log(3);
      //I want that promise complete loadedmetadata, then go to another promise iteration
      video.on("loadedmetadata", function () {
         console.log(`${secondsReady} seconds of video are ready to play.`);
      });
   });
 });
}

If it possible i woold like, not touch all messages loop.

Check out for await ... of loops: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of — Gh05d, Mar 15 '21 at 16:06
Your `for` loop body does not use `data[0]` and it does not use `i`. What's the point of that loop? — Tomalak, Mar 15 '21 at 16:41
@Tomalak i wrote only involved code. There are: text messages, small videos, files and etc. This part is for big videos which have chunks. I need to load video one by one, without freezing browser and if it possible not slow another messages to load. Data is json response from server. — rnod, Mar 15 '21 at 17:06
If the loop body uses *nothing* from the loop head then the loop makes no sense. You're just doing the same thing X times, which is nice, but not particularly useful, wouldn't you think? — Tomalak, Mar 15 '21 at 17:24

Apoorva Chikara · Answer 1 · 2021-03-15T17:03:53.400

You can actually use async/await in for loops, it doesn't work well with other forloop iteration like forEach, filter etc. :

const PromiseMe = () => {

return new Promise((res, rej) => {
         setTimeout(() => {
             res('Integrate Me');
     }, 1000)
 });
}

const main = async () =>  {
  for(let i = 0; i< 10; i++) {
        let val =  await PromiseMe();
        console.log(val);
  }
 
}
main();

So, you can actually implement this in you for-loop like this.

const result = [];
const mockFunction = async () => {
 for (var i = 0; i < data[0].length; i++) {
   //Get chunks array from file cluster
   //urls is an array
   let chunkPromises = await fetch(url[i]);
   result.push(chunkPromises); //parse this data to specific format if needed
}

console.log(result);

Promise.all in loop, one by one. Await until function fully completed

1 Answers1