Асинхронный Javascript, как ждать, пока будет выполнено различное количество задач загрузки для всех?

Question

У меня есть saveBlogPost() функция, которая должна выполнять следующие действия:

• Вызовите функцию uploadImages(), чтобы обновить образы blogPost в хранилище Firebase. Количество изображений не фиксировано.
• Дождитесь завершения загрузки всех изображений с успехом или ошибкой. В случае успеха URL для каждого изображения будет доступен в объекте blogPost.
• Акт, основанный на результате загрузки
  • В случае успеха: сохранить сообщение в Firestore
  • В случае ошибки: отобразить сообщение об ошибке для пользователя

У меня вопрос, как ждать разного количества загрузок?

Вот мой код:

---

Функция savePost ():

function savePost() {
  uploadImages();
}

Функция uploadImages ():

Примечание: images - это массив файлов изображений для загрузки.

function uploadImages() {
  images.forEach((image) => {
    const uploadTask = storageRef.put(file,metadata);
    uploadTask.on('state_changed',
      function progress() {
        //UPLOAD PROGRESS BAR
      },
      function error(err) {
        //SET ERROR
      },
      function complete() {
        //UPDATE IMAGE URL IN BLOGPOST OBJECT
        //SET COMPLETE
      }
  });
}

ВОПРОС:

Мое намерение состоит в том, чтобы сделать savePost() функцию async и await для функции uploadImages(). Но как я могу разрешить / отклонить функцию uploadImages() только после того, как ВСЕ изображения разрешены / отклонены ?

Что-то вроде:

async function savePost() {
    const result = await uploadImages();
    // ACT BASED ON RESULT
  }

Но я не знаю, что делать с функцией uploadImages(), чтобы разрешать / отклонять только после того, как все изображения сделаны.

Как я могу это сделать?

Answer 1

function uploadImages() {
    const promises = images.map(async image =>
        new Promise((resolve, reject) => {
            const uploadTask = storageRef.put(file, metadata);
            uploadTask.on('state_changed',
                function progress() {
                    //UPLOAD PROGRESS BAR
                },
                function error(err) {
                    //SET ERROR
                    reject(err);
                },
                function complete() {
                    //UPDATE IMAGE URL IN BLOGPOST OBJECT
                    //SET COMPLETE
                    resolve();
                }
            );
        })
    );

    return Promise.all(promises);
}

Answer 2

Цикл

A forEach не будет работать для async / await, как вы хотели бы, чтобы он работал.

Попробуйте использовать простой цикл for:

for(let i = 0; i < n; i++){
    let response = await savePost();
}