node.js - 节点：等待异步多个图像加载完成

Question

我知道以前有人问过类似的问题。我仍然无法解决我遇到的问题。在执行另一部分代码之前，我需要加载一堆图像。

(async () => {
  const urls = <array of urls>
  await urls.map(url => {
    const filename = path.basename(url);
    const localPath = imagesPath + '/' + filename;
    return loadImageToPath(url, localPath);
  });
  console.log('done');
})();

async function loadImageToPath(url, localPath) {
  const file = fs.createWriteStream(localPath);
  return await http.get(url, function (response) {
    console.log('Image loaded: ' + localPath);
    response.pipe(file);
  });
}

有人可以分享一下这个吗！

多谢

Answer 1

Map 正在返回一系列承诺，等待所有承诺解决使用 Promise.all()，MDN 参考链接

(async () => {
   const urls = <array of urls>
   const promises = await urls.map(url => {
       const filename = path.basename(url);
       const localPath = imagesPath + '/' + filename;
       return loadImageToPath(url, localPath);
   });
   const responses = await Promise.all(promises)  // this line waits all promises to resolve
   console.log('done');
 })();

Answer 2

我对代码进行了一些更改，它现在正在运行。我认为 http 本身正在返回一个承诺。使用返回承诺的包装器，它现在正在工作。

(async () => {
  const urls = <array of urls>
  await urls.map(url => {
    const filename = path.basename(url);
    const localPath = imagesPath + '/' + filename;
    return loadImageToPath(url, localPath);
  });
  console.log('done');
})();

async function loadImageToPath(url, localPath) {
    const file = fs.createWriteStream(localPath);
    return new Promise((resolve, reject) => {
        http.get(url, function (response) {
            console.log('Image loaded: ' + localPath);
            response.pipe(file);
            resolve();
        });
  });
}