узел: дождаться окончания загрузки асинхронных изображений

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

Я внес некоторые изменения в код, и теперь он работает.Я думал, что 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();
        });
  });
}  

Answer 2

Карта возвращает массив обещаний, чтобы дождаться разрешения всех обещаний, используйте 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');
 })();