Question

我有一个firebase数据库，其中包含元素节点，这些元素还包含作为图像的firebase存储位置数组。在我的网络应用程序中，我正在尝试检索这些图像。以下是我的代码。

var downUrl;
for(var ob in arrdata){
    var elem = document.createElement("img");
    elem.style.width = "200px";
    elem.style.height = "200px";
    elem.setAttribute("id",snapshot.child(ob).child("imagepaths").val()[0]);
    //List element's property setting
    var model =snapshot.child(ob).child("mobile").child("model").val();
    var imgPath = snapshot.child(ob).child("imagepaths").val()[0];
    var price = snapshot.child(ob).child("price").val();
    var manu = snapshot.child(ob).child("mobile").child("manufacturer").val();
    //End of List element's property setting
    console.log(model);
    storage.refFromURL(imgPath).getDownloadURL().then((url) => {
        downUrl = url;
        elem.setAttribute("src",downUrl);
        var contentString = "<li> <span class='mdl-list__item-primary-content'>" +
                            elem.outerHTML+"<span>"+manu+" "+model+"</span>" +
                            "<span class='mdl-list__item-sub-title'>"+price+"</span>" +
                            "</span>" +
                            "</li>";
        console.log(snapshot.child(ob).child("mobile").child("manufacturer").val());
        $("#addList").append(contentString);
    })
}

我的问题是它始终显示模型，价格和制造商的相同内容。我认为造成这种情况的原因是检索图像是异步的，所以它取代了最后检索到的模型，价格和手动内容。我怎么能克服这个？有同步方法吗？

Answer 1

使用.then是异步的，这意味着一旦运行它只会提取最后一个模型，价格和菜单值。一种解决方案是调用一个函数，并在循环的每次迭代中传递每个值。然后在该函数内部运行您的图像查找。这将在值上创建一个闭包，保存它们直到异步调用使用。

function addHTML(imgPath,model,price,menu){
  storage.refFromURL(imgPath).getDownloadURL().then((url) => {
    var downUrl = url;
    elem.setAttribute("src",downUrl);
    var contentString = "<li > <span class='mdl-list__item-primary-content'>"+
    elem.outerHTML+
    "<span>"+manu+" "+model+"</span>"+
     "<span class='mdl-list__item-sub-title'>"+price+"</span>"+
     "</span>"+
    "</li>";
     $("#addList").append(contentString);
  })
}

如何同步从firebase存储中检索

1 个答案: