我有一个在 javascript 中的 for 循环后返回 promise 的函数,因为我是 promise 和异步等待的新手,所以我想知道这是否是在迭代过程中返回 promise 的有效方式。这是片段
function addImagesToCanvas(urls){
return new Promise(resolve => {
for(url of urls){
loadImage(url).then(img_element =>{
addImageToCanvas(img_element);
});
}
resolve();
});
}
function displayCanvas(){
$.ajax({
....
success: function(response){
urls = JSON.Parse(response);
addImagesToCanvas(urls).then(() => {
//..Do something
});
}
});
}
Is there a way of re-writting the above code with **async/await** ? Thanks for the comments
最佳答案
绝对不是。您的代码不会等待循环中的 promise 来解决。
如果您想串联等待它们(一个接一个,每个都在等待前一个),那么既然您提到了使用 async
函数和 await
,您只需按照标准逻辑流程编写它,等待每个 promise:
async function addImagesToCanvas(urls){
for (url of urls) {
const img_element = await loadImage(url);
addImageToCanvas(img_element);
}
}
或者当然:
async function addImagesToCanvas(urls){
for (url of urls) {
addImageToCanvas(await loadImage(url));
}
}
如果你想让它们全部并行处理并等待结果,使用map
获取promise的数组并返回由Promise.all
创建的promise > 并返回它的 promise :
function addImagesToCanvas(urls){
return Promise.all(urls.map(url => loadImage(url).then(addImageToCanvas)));
}
或者:
function addImagesToCanvas(urls){
return Promise.all(urls.map(async (url) => {
addImageToCanvas(await loadImage(url);
}));
}
函数本身不需要async
,因为它可以直接从Promise.all
返回promise。
旁注:您的代码似乎成为我所说的 The Horror of Implicit Globals 的牺牲品.您需要声明 url
。例如,在上面的第一个代码块中:
async function addImagesToCanvas(urls){
for (const url of urls) {
// ^^^^^----------------------------------------- const or let (or even var, but...I wouldn't)
const img_element = await loadImage(url);
addImageToCanvas(img_element);
}
}
关于javascript - 在 Javascript 的 for 循环中返回 promise 的有效方法是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58170311/