等待承诺兑现后再将其推入数组（Javascript承诺）

问候Javascript开发人员

我对Javascript和ReactJS比较陌生，每天都在学习新东西。目前我无法解决一个问题：

我的组件

useEffect(() => {
    firebase
        .firestore()
        .collection('artworks')
        .doc(props.artworkid)
        .collection('images')
        .get()
        .then(images => {

            let arr = []

            images.docs.forEach(image => {

                arr.push({
                    thumbnail: getImageURL(`${ image.data().imagename }_200x200.${ image.data().imageextension }`),
                    fullres: getImageURL(`${ image.data().imagename }_2000x2000.${ image.data().imageextension }`)
                })

            })

        })
}, [ props.artworkid ])

我的助手功能

export const getImageURL = (filename) => {
    return firebase
        .storage()
        .ref(filename)
        .getDownloadURL()
        .then(response => {

            return response

        })
}

问题是，我总是得到一个充满承诺的数组，这些承诺会在以后实现：

[{
    "thumbnail": Promise,
    "fullres": Promise
}, {
    "thumbnail": Promise,
    "fullres": Promise
}, {
    "thumbnail": Promise,
    "fullres": Promise
}, {
    "thumbnail": Promise,
    "fullres": Promise
}]

我的目的是填充对象数组（存储在Google Firebase云存储上的缩略图和fullres图像URL），并将其呈现为此功能组件中的图像库

我如何等待承诺首先兑现，然后再将其推入阵列或状态？我想这与async/await有关……但我不能对此束手无策。有人能帮我吗？

---

你可能想看看

useffect（（）=>{
火基
.firestore（）
.收藏（“艺术品”）
.doc（props.artworkid）
.collection（'图像'）
.get（）
。然后（图像=>{
设arr=[]
images.docs.forEach（image=>{
const thumbnailPromise=getImageURL（`${image.data（）.imagename}{u 200x200.${image.data（）.imageextension}`）
const fullresPromise=getImageURL（`${image.data（）.imagename}{u 2000x2000.${image.data（）.imageextension}`）
承诺。所有（[拇指钉承诺，完全承诺]）
。然后（值=>{
arr.push({
缩略图：值[0]，
fullres：值[1]
})
});
})
})
}，[props.artworkid]）

您可能想看看

useffect（（）=>{
火基
.firestore（）
.收藏（“艺术品”）
.doc（props.artworkid）
.collection（'图像'）
.get（）
。然后（图像=>{
设arr=[]
images.docs.forEach（image=>{
const thumbnailPromise=getImageURL（`${image.data（）.imagename}{u 200x200.${image.data（）.imageextension}`）
const fullresPromise=getImageURL（`${image.data（）.imagename}{u 2000x2000.${image.data（）.imageextension}`）
承诺。所有（[拇指钉承诺，完全承诺]）
。然后（值=>{
arr.push({
缩略图：值[0]，
fullres：值[1]
})
});
})
})
}，[props.artworkid]）

不要等到承诺了才去推动。一定要将它们放入一系列承诺中，然后只使用

Promise.all

。不要等到承诺兑现后再推。一定要将它们放入一系列承诺中，然后只需使用

Promise.all

。就这样！太简单了。现在我也知道了，我必须更深入地研究异步编程的承诺。非常感谢。就这样！太简单了。现在我也知道了，我必须更深入地研究异步编程的承诺。非常感谢。