如何同步從Firebase存儲中檢索

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