Javascript 从Firebase存储下载多个图像

我将介绍Firebase Storage Web的第一步，并承认Javascript也不是我的专长

我有一个包含人名列表的网页（PHP），我想在名字旁边显示他们的照片。图像保存在Firebase存储文件夹中

下面是一个简单的html示例（使用PHP生成）：

这是我加载一张照片的代码。它工作得很好

var storage = firebase.storage();
var refPath = storage.ref('photos/johnnydepp.jpg');
refPath.getDownloadURL().then(function(url) {
    document.getElementById('photo1').src = url;
}).catch(function(error) {
    console.log(error);
});

但是现在我尝试加载页面中的所有图像，因此我创建了一个带有文件名（用PHP加载）的Javascript数组变量，并执行了如下操作：

firebase.initializeApp(config);
firebase.auth().signInAnonymously(); // Ignoring security for now

var photos = ["johnnydepp", "jimcarrey", "emmawatson"];

var photoId = 0;
var refPath = null;
var storage = firebase.storage();
for (var i = 0; i <= photos.length - 1; i++) {
    photoId = i + 1;
    refPath = storage.ref('photos/' + photos[i] + '.jpg');
    refPath.getDownloadURL().then(function(url) {
        document.getElementById('photo' + photoId).src = url;
    }).catch(function(error) {
        console.log(error);
    });
}

var photos=[“johnnydepp”、“Jimcarey”、“emmawatson”]；
var-photoId=0；
var refPath=null；
var storage=firebase.storage（）；
对于（var i=0；i{
  const promise=firebase.storage（）
    .参考（'photos/'+val+'.jpg'））
    .getDownloadURL（）
    .捕获（错误=>{
console.log（'error'，err）；
        返回“”；
    })
    .然后（fileUrl=>{
        返回fileUrl；
    });
    承诺。推动（承诺）；
});
所有（承诺）
    .捕获（错误=>{
        console.log（'error'，err）；
    })
    .然后（URL=>{
对于（var i=0；i来说，获取下载url是异步请求（承诺），您可以执行下一个循环周期，而不让前一个循环完成，因此只完全执行最后一个循环周期

我建议你采取不同的方法

var photos = ["johnnydepp", "jimcarrey", "emmawatson"];

var photoId = 0;
var storage = firebase.storage();
var promises = [];
for (var i = 0; i <= photos.length - 1; i++) {
    photoId = i + 1;
    promises.push(storage.ref('photos/' + photos[i] + '.jpg').getDownloadURL());
}

photoId = 0;
Promise.all(promises, data => {
    for (var i = 0; i <= photos.length - 1; i++) {
        photoId = i + 1;
        document.getElementById('photo' + photoId).src = data[i];
    }
});

var photos=[“johnnydepp”、“Jimcarey”、“emmawatson”]；
var-photoId=0；
var storage=firebase.storage（）；
var承诺=[]；
对于（var i=0；i{
对于（var i=0；i来说，这里的问题是在循环中使用异步函数，应该这样使用自包装函数：

for (var i = 0; i <= photos.length - 1; i++) {
    photoId = i + 1;
    refPath = storage.ref('photos/' + photos[i] + '.jpg');
    (function(pid) {
        refPath.getDownloadURL().then(function(url) {
            document.getElementById('photo' + pid).src = url;
        }).catch(function(error) {
            console.log(error);
        });
    })(photoId);
}

一个自包装函数创建了一个保持你的
photoId
值的函数，谢谢你，但是你确定这个函数可以工作吗？我不能让它工作，即使在移除循环和使用静态值的时候…谢谢你，德维德！你的解释很好，我理解我做错了什么。我会接受你的答案，但也会保留我的解决方案问题是，盖伊·布鲁什·三木！
var photos = ["johnnydepp", "jimcarrey", "emmawatson"];

var photoId = 0;
var storage = firebase.storage();
var promises = [];
for (var i = 0; i <= photos.length - 1; i++) {
    photoId = i + 1;
    promises.push(storage.ref('photos/' + photos[i] + '.jpg').getDownloadURL());
}

photoId = 0;
Promise.all(promises, data => {
    for (var i = 0; i <= photos.length - 1; i++) {
        photoId = i + 1;
        document.getElementById('photo' + photoId).src = data[i];
    }
});

for (var i = 0; i <= photos.length - 1; i++) {
    photoId = i + 1;
    refPath = storage.ref('photos/' + photos[i] + '.jpg');
    (function(pid) {
        refPath.getDownloadURL().then(function(url) {
            document.getElementById('photo' + pid).src = url;
        }).catch(function(error) {
            console.log(error);
        });
    })(photoId);
}

for (var i = 0; i <= photos.length - 1; i++) {
    photoId = i + 1;
    setTimeout(function() {
        console.log(photoId);
    }, 1000)
}