使用 async/await 和 firebase firestore 下载图像答案

【问题标题】：Using async/await with firebase firestore to download images使用 async/await 和 firebase firestore 下载图像
【发布时间】：2021-09-25 03:49:05
【问题描述】：

我有一个功能可以列出下面的所有图片

我需要等到这个功能完全完成后再执行另一个动作。

问题是我不理解这种情况下的 async /await。

function listAllImages() {
  listRef.listAll()
  .then((res) => {

      res.prefixes.forEach((folderRef) => {});
      res.items.forEach((itemRef) => {

          // Get the download URL
          itemRef.getDownloadURL()
              .then((url) => {
                  container.innerHTML += `<img src="${url}"/>`
              })
              .catch((error) => {
                  switch (error.code) {
                      case 'storage/object-not-found':
                          break;
                      case 'storage/unauthorized':
                          break;
                      case 'storage/canceled':
                          break;

                      case 'storage/unknown':
                          break;
                  }
              });

      });
  }).catch((error) => {
      console.log("Uh-oh, an error occurred!")
  });
}

【问题讨论】：

“我不理解这种情况下的异步/等待”是什么意思？你得到一些特定的错误吗？真正的问题是什么？
我需要等到这个函数完全完成..，这个函数是什么函数？
在执行另一个函数之前，我需要等待所有这些图片都添加到容器中。问题是要从 firebase 获取 url，这个过程是异步完成的。我不知道我是否清楚。
@Nemanja OP 正在尝试使用从 for 循环内部开始的 Promise，并等待所有这些 Promise 在 listAllImages() 返回的 Promise 解决之前解决，这可以使用 @987654323 完成@.
非常感谢，你能说得更准确一点吗？异步函数对我来说是新的。

标签： javascript firebase asynchronous async-await

【解决方案1】：

你可以试试这个，但我不确定为什么在 req.prefixes 上运行循环。

async function listAllImages() {
    const res = await listRef.listAll()
    // res.prefixes.forEach((folderRef) => { });

    const requests = res.items.map(itemRef => itemRef.getDownloadURL())
    const urls = await Promise.all(requests)

    urls.forEach((url) => {
        container.innerHTML += `<img src="${url}"/>`
    })
}

listAllImages().then(() => {
  console.log("All images listed")
}).catch((e) => console.log(e))

【讨论】：