Реакция - неправильно загружено несколько изображений (Firebase Firestore and Storage)

Question

У меня возникли проблемы при попытке зарегистрировать данные в Firebase Firestore и Storage в нужное время.

Я использую React и Firebase, и у меня есть экран, на котором пользователь регистрирует шар с его информацией и изображениями. Как только пользователь запросил эту информацию, я использую эту функцию Firebase ниже. Сначала я регистрирую вновь созданные данные, беру их идентификатор, а затем использую его для создания пути в хранилище, а затем сохраняю загруженные пользователем изображения. И данные для Firestore и Storage сохраняются как надо, за исключением времени.

Проблема в том, что я получаю ответ сразу после добавления информации о мяче, а не до тех пор, пока изображения не будут загружены. Когда я запускаю приведенный ниже код, я сразу получаю ответ в том месте, где находится console.log(resultCheck) (что является обещанием) и до console.log(snapshot);. Мне нужно вернуть оба ответа одновременно, но я не могу найти правильное асинхронное время.

  async registerBall(ball, images) {
    let result = await this.firebase.firestore()
      .collection("balls")
      .add(ball)
      .then(async function(ballResult) {

        if (images.length > 0) {
          var storageRef = firebase.storage().ref();
          let imageUploadResult = await images.map(async image => {

            let uploadTask = await storageRef
              .child("images/balls/" + ballResult.id + "/" + image.name)
              .put(image.file, { contentType: image.file.type })
              .then(snapshot => {
                console.log(snapshot);
                return { isError: false };
              })
              .catch(error => {
                return { isError: true, errorMessage: error };
              });
            return uploadTask;

          });
          let resultCheck = { isError: false };
          imageUploadResult.forEach(result => {

            if (result.isError) {
              return (resultCheck = {
                isError: true,
                errorMessage: result.errorMessage
              });
            }

          });

          console.log(resultCheck);
          return resultCheck;

        } else {
          return { isError: false };
        }
      })

      .catch(function(error) {
        return { isError: true, errorMessage: error };
      });
    return result;
  }

Спасибо за помощь!

Answer 1

Эта проблема, вероятно, связана с попыткой await вашего images.map при загрузке, которая фактически возвращает массив обещаний. Для ожидания всех из них вы можете использовать Promise.all, то есть:

const imageUploadPromises = images.map(async image => {...

Тогда:

const imageUploadResults = await Promise.all(imageUploadPromises);