Javascript 如何同步从firebase存储中检索

我有一个firebase数据库，其中包含元素节点，还包含firebase存储位置数组（即图像）。在我的web应用程序中，我试图检索这些图像。下面是我的代码

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);
    })
}

我的问题是它总是显示相同的内容为模型，价格和手工。我认为这个问题的原因是检索图像是异步的，所以它会替换上次检索到的相同的model、price和manu内容。我怎样才能克服这个问题？有什么方法可以同步执行此操作吗？

使用.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);
  })
}

---

解决了这个问题。总是想得简单。。谢谢