Javascript 尝试从firebase存储下载img，链接为firebase数据库

我尝试下载firebase存储中的图像，链接存储在数据库中。当我尝试下载映像时，在for循环完成时执行需要更多的时间

是否有任何我及时下载的过程不会使功能真正变慢？我已经用setTimeout解决了这个问题，但我希望有比我更好的解决方案。帮助我！谢谢大家!

export const shampooHandler = () => {
  return (dispatch) => {
    dispatch(shampooStart());
    const data = [];
    const imgList = [];
    fire
      .database()
      .ref()
      .child("Shampoo")
      .once("value")
      .then((response) => {
        for (let i = 0; i < response.val().length; i++) {
          fire.storage().refFromURL(response.val()[i].img).getDownloadURL().then((image) => {
              imgList.push(image);
            })
            .catch((error) => {
              dispatch(shampooError(error));
            });
          setTimeout(() => {
            name = response.val()[i].name;
            description = response.val()[i].description;
            value = response.val()[i].value;
            img = imgList[i];
            data.push({ name, description, value, img });
            if (i === (response.val().length - 1)) {
              dispatch(shampooSuccess(data));
            }
          }, 3000);
        }
      })
      .catch((error) => {
        dispatch(shampooError(error));
      });
  };
};

    
    

export const shampooHandler=（）=>{
返回（发送）=>{
调度（洗发水启动（））；
常量数据=[]；
常量imgList=[]；
火
.数据库（）
.ref（）
.儿童（“洗发水”）
.一次（“价值”）
。然后（（响应）=>{
for（设i=0；i{
imgList.push（图像）；
})
.catch（（错误）=>{
派遣（洗发水错误（错误））；
});
设置超时（（）=>{
name=response.val（）[i].name；
description=response.val（）[i]。description；
value=response.val（）[i].value；
img=imgList[i]；
push（{name，description，value，img}）；
if（i==（response.val（）.length-1））{
派遣（洗发水成功（数据））；
}
}, 3000);
}
})
.catch（（错误）=>{
派遣（洗发水错误（错误））；
});
};
};

我花了一天的时间为它找到一个合适的解决方案。它可能会帮助某人在将来找到解决方案。谢谢大家给我一个想法，特别是道格拉斯·史蒂文森给了我一个想法

---

在使用变量之前，我已经声明了所有变量。不要使用setTimeout。使用getDownloadURL返回的承诺来确定url何时准备就绪。在下载图像之前完成循环，以及如何使用url使其准备就绪。我是否应该创建单独的承诺或使用它的主要功能？你能再评估一下这个解决方案吗？

export const shampooHandler = () => {
  return (dispatch) => {
    dispatch(shampooStart());
    const data = [];
    const imglist = [];
    fire.database().ref().child("Shampoo").once("value").then((response) => {
      response.val().forEach(element => {
        const promise = imageUrlHandler(element.img).then(url => {
          return url;
        }).catch(error =>{
          dispatch(shampooError(error));
        })
        imglist.push(promise);
         //all the promise call to download the images
        Promise.all(imglist).then(items =>{
          const dataCollection = {
            name: element.name,
            description: element.description,
            value: element.value,
            img: items[items.length - 1]
          }
          data.push(dataCollection);
          if(data.length === response.val().length){
            dispatch(shampooSuccess(data));
          }
        }).catch(err =>dispatch(shampooError(err)));
      })

    }).catch(error => {
      dispatch(shampooError(error));
    })
  }
}


export const imageUrlHandler = (databaseUrl) => {
  return new Promise((resolve,reject)=> {
    fire.storage().refFromURL(databaseUrl).getDownloadURL().then((url) => {
      resolve(url);
    })
    .catch((error) => {
      reject(error)
    });
  })
}