Firebase 存储承诺未得到解决

Question

我编写的代码检索存储在我的 Firebase 存储桶中的 url 图像并将它们加载到 imageUrls 数组中。

该代码在大约 80% 的实例中有效，但对于剩余的（看似随机的 20%），当代码为运行时，它无法解决某些承诺，但不会抛出异常要么。

代码：

async function loadImages() {
    // Load image urls from firebase storage
    Object.values(imageOrder).forEach(async (fileName, index) => { // Iterate through each imageName for image that should be loaded (e.g., "dogs.jpg", "mountains.jpeg")
        const imgRef = ref(storage, `images/projects/${project.id}/draft/${fileName}`)
        const imgUrl = await getDownloadURL(imgRef) // this promise may never get resolved for some iterations of the loop
        const imgPos = index // store index in array at which this image should be inserted into

        setImageUrls(prevState => {
            let newArray = [...prevState]
            newArray = newArray.map((item, index) => index === imgPos ? imgUrl : item) // replace null value in array with loaded image url at appropriate index
            return newArray
        })
    })
}

从未得到解决的承诺出现在 const imgUrl = await getDownloadURL(imgRef) 行上方。

我在不同的地方插入了控制台日志语句以了解正在发生的事情的细节。我期望的所有图像名称都在 forEach 循环中迭代，并为每个图像创建一个 imgRef 引用。

但在某些情况下，只有一部分承诺得到解决。在其余部分，await 语句之后的代码不会被调用，因此生成的 imageUrls 数组包含 url 字符串和 null 值的组合。

为什么会发生这种情况？我还能做些什么来进一步澄清问题吗？谢谢。

Answer 1

您可以使用 Promise.all() 立即尝试运行那些 getDownloadURL() 承诺。尝试重构代码，如下所示：

async function loadImages() {
    // Load image urls from firebase storage
    const promises = [];
    
    Object.values(imageOrder).forEach(image => {
        const imgRef = ref(storage, `images/projects/${project.id}/draft/${fileName}`);
        promises.push(getDownloadURL(imgRef));
    })

    const urls = (await Promise.all(promises)).filter(url => !!url);

    setImageUrls(urls);
}

Returned values from Promise.all() will be in order of the Promises passed, regardless of completion order.

因此您不需要使用 index 显式排序。最后的 filter() 也会删除任何 null 值。

同时结账：

Firebase 存储承诺未得到解决

Firebase Storage Promise Not Being Resolved

javascript

firebase

reactjs

firebase-storage