React - Проблемы с асинхронным ожиданием с асинхронным

Я помещаю файлы в хранилище Firebase, просматриваю список изображений и хочу разместить их одно за другим в Firebase. Но карта не ожидает завершения загрузки изображения, она запускает все изображения одновременно, и я хочу, чтобы они были по одному.

createProject() {
    let url;
    let prevState = this.state;
    let project = {
        projectName: prevState.projectName,
        description: prevState.description,
        images: [],
    }
    let getUrl = function (url) {
        console.info('DONE' + url);
    }
    prevState.project.images.map(async (image, key) => {
        let url = await this.putFile(image);
        getUrl(url);
    })
}

putFile(file, getUrl) {
    return new Promise(function (resolve, reject) {
        let storageRef = fire.storage().ref('Projects/Images/');
        const image = file;
        const name = file.imageName;
        const metadata = {
            contentType: file.data.type,
        };
        const task = storageRef.child(name).put(image.data, metadata);

        task.on('state_changed', function (snapshot) {
            var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.info('Upload is ' + progress + '% done');
            switch (snapshot.state) {
                case firebase.storage.TaskState.PAUSED: // or 'paused'
                    console.info('Upload is paused');
                    break;
                case firebase.storage.TaskState.RUNNING: // or 'running'
                    console.info('Upload is running');
                    break;
            }
        }, function (error) {

        }, function () {
            task.snapshot.ref.getDownloadURL().then(function (downloadURL) {
                resolve(downloadURL);
            });
        });

    });
}

Я хотел, чтобы карта дождалась последнего «решения».

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
329
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо этого вы можете использовать асинхронный цикл for-of:

async createProject() {
  // ...
  for (let image of prevState.project.images) {
    let url = await this.putFile(image);
    getUrl(url);
  }
}

@FILIPPEOLIVEIRADASILVARODR Нет проблем, Филипп! Добро пожаловать в stackoverflow!

Tholle 01.07.2018 13:56

Другие вопросы по теме