将多个图像上传到firebase存储，然后查看所有下载URL

Question

我有一系列图像。在单击按钮后，我将每个单独的图像上传到 Firebase Storage，然后将 DownloadURL 放入数组中。我想在所有图像上传后显示该数组。问题是，当我在 Promise.all 设置断点时，我看不到数组中的所有图像，而只能看到 5 个图像中的前 3 个。只有重新加载浏览器后，我才能看到其余图像。我怎样才能等到所有 DownloadURLS 都真正在数组中？

const uploadAllImages = async () => {
let array = [];
const promises = [];
try {
  for (let i = 0; i < previews.length; i++) {
    const fileName = uuidv4() + ".jpg";
    const storageRef = ref(
      storage,
      `${currentUser.email}/images/` + fileName
    );

    const filesForUpload = await uploadString(
      storageRef,
      previews[i],
      "data_url"
    ).then((snapshot) => {
      getDownloadURL(snapshot.ref).then(async (url) => {
        array.push(url);
      });
    });

    promises.push(filesForUpload);
  }
} catch (error) {
  console.log(error);
}

await Promise.all(promises)
  .then(() => {
    console.log(array);
    setUploadedImages(array);
  })
  .then(() => //Set to true elsewhere  setLoading(false));
};

Answer 1

因此，截图中存在一些问题。 主要是 async wait 与 Promise.then 语法。

在异步函数中，我们可以等待 Promise。当在

await

之后调用 Promise 时。在承诺得到解决之前，代码不会继续执行。此外，我们可以尝试{}捕获{}错误

如果在同步函数中，处理 Promise 并强制执行同步行为的方法是使用 Promise 回调方法

new Promise.then().error().finally...

。这允许我们在 Promise 解决或拒绝后执行回调函数。

在您的代码片段中，这两个概念可以互换使用，我认为这里出了问题。

因此，建议的解决方案可以是这样写

const uploadAllImages = async () => {
  let array = [];
  const promises = [];

  const uploadFile = async (storageRef, preview) => {
    const snapshot = await uploadString(storageRef, preview, "data_url");
    const url = await getDownloadURL(snapshot.ref);
    array.push(url);
  }

  try {
    for (let i = 0; i < previews.length; i++) {
      const fileName = uuidv4() + ".jpg";
      const storageRef = ref(
        storage,
        `${currentUser.email}/images/` + fileName
      );
  
      promises.push(uploadFile(storageRef, previews[i]));
    }
  } catch (error) {
    console.log(error);
  }
  
  await Promise.all(promises);
  console.log(array);
  setUploadedImages(array);
};

编辑，添加一件事。调用不带await关键字的异步函数将返回一个promise。使用await关键字调用它们将返回函数return语句