如何在 javascript firebase 存储中等待下载 url？答案

【问题标题】：How to wait for the download url in javascript firebase storage?如何在 javascript firebase 存储中等待下载 url？
【发布时间】：2021-04-07 01:03:26
【问题描述】：

我有一张地图，它将获取一组文件，并从 firebase 存储中返回一组下载 url。

const imageUrls = images.map((image, index) => {
    const imageUploadTask = storage()
      .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
      .put(image);

    imageUploadTask.on(
      "state_changed",
      (snapshot) => {},
      (error) => {
        console.log(error);
      },
      () => {
        storage()
          .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
          .getDownloadURL()
          .then((url) => {
            console.log(url);
            return url;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    );
  });

当我记录 imageUrls 数组时，它返回一个未定义的数组。但是在控制台中，我看到了一段时间后记录的 url。这意味着 url 正在上传，但代码没有等待它，并且在 url 未定义时返回。

我做错了什么？如何让它发挥作用？

【问题讨论】：

imageUploadTask 是一个 UploadTask 对象，其工作方式类似于一个承诺。使用它来确定上传何时完成。之后就可以得到它的下载地址了。

标签： javascript firebase-storage

【解决方案1】：

您需要设置一个单独的变量，将.push(url) 推送到其中。请参阅下面的示例：

    var imageUrls = []; // <======== set this as a separate variable and remove it from the next line
    
    images.map((image, index) => {
        const imageUploadTask = storage()
          .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
          .put(image);
    
        imageUploadTask.on(
          "state_changed",
          (snapshot) => {},
          (error) => {
            console.log(error);
          },
          () => {
            storage()
              .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
              .getDownloadURL()
              .then((url) => {
                console.log(url);
                imageUrls.push(url); // <============= add this line here
                return url; // <====== you can remove this
              })
              .catch((err) => {
                console.log(err);
              });
          }
        );
      });

【讨论】：

【解决方案2】：

通过反复试验。我找到了一种适合我的方法。

for (const image of images) {
    const index = images.indexOf(image);

    await storage()
      .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
      .put(image);

    const url = await storage()
      .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
      .getDownloadURL();

    imageUrls.push(url);
  }

我可以在异步函数中使用它并且它可以正常工作。

【讨论】：