仅在 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”逻辑