僅在 Javascript forEach/map 之后執行代碼

Question

我有一個forEach函數，它循環遍歷文件數組，將文件上傳到 Firebase Storage，然后在上傳后，它將圖像引用鏈接存儲到之前定義的數組中。

每次迭代的過程：

• 獲取文件對象並轉換為 Blob
• 將 Blob 上傳到 Firebase
• Blob 上傳后，接收一個回調，其中包含上傳的圖像引用
• 將圖像參考存儲在列表中

在forEach ，我使用圖像引用列表進行進一步處理。 但是，當我嘗試引用該列表時，它通常是空的，因為此代碼在任何圖像上傳之前執行（並且未收到引用）。 如何將 async/await 與 Javascript forEach 函數一起使用，我可以在其中調用我的代碼以等待它應該期待填充圖像引用列表的位置。 我已經嘗試在 stackoverflow 上找到解決方案，但對我的解決方案沒有幫助。

submitPost = async event => {

event.preventDefault();
const img_names = [];

this.state.files.forEach((ref_, index) => {
  ref_.current.getCroppedCanvas().toBlob(blob => {

    var uploadTask = this.storageRef
      .child("images/" + String(index))
      .put(blob);

    uploadTask.on(
      "state_changed",
      snapshot => {
        var progress =
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log("Upload is " + progress + "% done");
      },
      error => {
        console.log(error);
      },
      () => {
        img_names.push(uploadTask.snapshot.ref.toString());
      }
    );
  });
console.log(img_names) // empty here
});

Answer 1

您可以通過使用map而不是forEach來實現該功能。 將您的數組轉換為 Promises 數組。 然后在Promise.all()使用該數組並等待它。

const promisifyUpload = (storageRef, ref_, index) => {
  return new Promise((resolve, reject) => {
    ref_.current.getCroppedCanvas().toBlob(blob => {

      var uploadTask = storageRef
        .child("images/" + String(index))
        .put(blob);

      uploadTask.on(
        "state_changed",
        snapshot => {
          var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log("Upload is " + progress + "% done");
        },
        error => console.log(error),
        () => resolve(uploadTask.snapshot.ref.toString())
      );

    });
  });

};

const submitPost = async event => {

  event.preventDefault();

  const img_names = await Promise.all(
    this.state.files.map((ref_, index) => promisifyUpload(this.storageRef, ref_, index))
  ));

  console.log(image_names); // Should now be filled
});

編輯：我把它分成 2 個函數來顯示隔離“promisify”邏輯