wie synchron aus Firebase-Speicher abgerufen werden

Question

Ich habe eine Firebase-Datenbank, die Knoten von Elementen enthält, die auch Array von Firebase-Speicherorten enthalten, die Bilder sind. In meiner Web App versuche ich diese Bilder zu finden. Folgendes ist der my-Code.

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

Mein Problem ist es zeigt immer den gleichen Inhalt für Modell, Preis und Manu. Ich denke, der Grund dafür ist, dass das Abrufen von Bildern asynchron ist, so dass es denselben zuletzt abgerufenen Inhalt für Modell, Preis und Manu ersetzt. Wie kann ich das überwinden? Gibt es eine Möglichkeit, dies synchron zu tun?

Answer 1

Die Verwendung von .then ist asynchron, dh nach der Ausführung werden nur die letzten Modell-, Preis- und Menüwerte abgerufen. Eine Lösung wäre, eine Funktion aufzurufen und jeden dieser Werte für jede Iteration der Schleife zu übergeben. Führen Sie dann innerhalb dieser Funktion Ihre Bildsuche aus. Dies erzeugt eine Schließung der Werte, die sie speichern, bis sie vom asynchronen Aufruf verwendet werden.

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