Как дождаться .map после чего, выполнить другую операцию?

Question

[lios1]

Я загружаю фотки, у меня появляется массив файлов, хочу перебрать массив файлов, после чего добавить эти файлы в firebase и получить ссылки этих фото и запушить их в пустой массив. Как дождаться, пока до конца сформируется массив ссылок, ничего уже не будет добавляться в базу данных и тогда уже отправить этот массив ссылок в базу данных для информации? Как сделать быстрее, через промисы наверное, но чтобы все работало, где ставить resolve?

const handleSubmit = async () => {
    let arr = []

    for(let file of files){
      console.log(new Date())
      const storageRef = ref(storage, `${props.id}/${file.name}`);
      await uploadBytes(storageRef, file)
        .then((snapshot) => {
          return getDownloadURL(snapshot.ref)
        })
        .then((url)=>{
          arr.push(url);
          console.log(url)
        })
    }

    console.log('success')
}

Answer 1

[vıtalıyırtlach]

Вы можете использовать Promise.all чтобы дождаться пока все фото добавятся и затем then

Comments

[lios1]

что именно оборачивать?

[lios1]

const promise = files.map(file => {
        const storageRef = ref(storage, `${name}/${file.name}`);
        uploadBytes(storageRef, file)
          .then((snapshot) => {
            return getDownloadURL(snapshot.ref)
          })
          .then((url)=>{
            arr.push(url);
          })
      })

      Promise.all(promise).then(() => {
        // другая функция
      })

не работает, сначала выполняет вторую функцию

[lios1]

я уже понял как с promise all работать, у меня ошибка, там undefined выдает, буду фиксить

Answer 2

[lios1]

Вот ответ, может кто-то будет делать

Promise.all(files.map(file => {
        const storageRef = ref(storage, `${name}/${file.name}`);
        return uploadBytes(storageRef, file).then(() => {
          return getDownloadURL(storageRef).then((url)=>{
            return url;
          })
        })
      })).then((values)=>{
        console.log(values)
      })