承诺.一个接一个地循环.等待功能完全完成

Question

我正在尝试逐一解决承诺，但我不知道如何解决。我想等到视频消息完全加载后再转到另一个承诺，否则它会冻结浏览器。在我的代码示例中，它不会等到视频命中loadedmetadata事件，然后转到下一个promise。在所有的承诺执行之后，加载所有的视频。外观：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.`);
});
});
});
}

如果可能的话，我喜欢羊毛，不要触摸所有的信息循环。

Answer 1

您实际上可以在for循环中使用async/await，它与其他forloop迭代(如forEach、filter等(配合不好：

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();

所以，你实际上可以在你的for循环中实现这个。

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);