Почему поле массива моих документов Firestore всегда обновляется только на один элемент меньше, чем массив, который я отправляю из внешнего интерфейса?

Question

Я пытаюсь обновить документ Firestore после сохранения файлов в Google Cloud Storage.Я хочу отправить массив URL-адресов хранимых файлов в документ в Firestore следующим образом ...

(attachments: [ {url: "fileone.jpeg", ...}, {url: "filetwo.jpeg", ...}, ...]).

Этот массив URL-адресов создается во внешнем интерфейсе с использованием firebases getDownloadURL().Я могу успешно обновить свой документ, но массив в обновленном документе всегда содержит на один элемент меньше, чем массив, созданный во внешней части.При console.log -изображении массива, хранящегося в памяти (для отправки в firestore), я вижу, что значение в скобках, предшествующее [{},{}], также на единицу меньше, чем array.length.

Какая запись в консолимассив fileUrls (хранящийся в памяти для отправки в firestore) отображается, даже если fileUrls.length === 3, а при расширении этой строки ниже отображаются все три URL-объекта, содержащие объекты с индексом 0:

fileUrls: > (2) [{…}, {…}]

Вот код реализацииэтот процесс обновления:

let fileUrls = [];               // <<-- Array for file urls to be stored
let promises = [];

for (const file of state.post.files) {
  const fileRef = storage.ref().child(`my file path`);
  const p = fileRef.put(file)
    .then(snapshot => {
      fileRef.getDownloadURL()
        .then(url => {
          fileUrls.push({ url: url, type: file.type })  // Adding urls to arr
        })
    })

  promises.push(p);
}

const all = Promise.all(promises);
all
  .then(() => {
    submissionRef.update({         // <<<--- Updating document created prior.
      attachments: fileUrls
    })
  })
  .catch(err => console.log(err));

Answer 1

Вы ожидаете окончания загрузки файла, но не ждете, пока загрузится URL для загрузки. Вам нужно будет включить обещание, возвращаемое getDownloadURL, в массив обещаний, передаваемых Promise.all (). Попробуйте вернуть его обещание от then обратного вызова для загрузки файла:

  const p = fileRef.put(file)
    .then(snapshot => {
      // add a return here to chain the promise returned by getDownloadURL()
      // with the promise returned by put()
      return fileRef.getDownloadURL()
        .then(url => {
          fileUrls.push({ url: url, type: file.type })  // Adding urls to arr
        })
    })

Попробуйте вместо этого использовать синтаксис async / await, чтобы избежать всех этих обратных вызовов и сделать код легче для чтения.