javascript - 在 Javascript 的 for 循环中返回 promise 的有效方法是什么

Question

我有一个在 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

Answer 1

绝对不是。您的代码不会等待循环中的 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);
    }
}