Promise-Rückgabedaten können der Klassenvariablen nicht zugewiesen werden?

Question

Ich versuche, den Wert der versprochenen Rückgabe an eine Variable zuzuweisen, aber es wird nicht zugewiesen. Ich bekomme immer noch leere Zeichenfolge, wenn ich console.log (this.imageref1). Ziel ist es, die Datei data.downloadURL abzurufen, die nach dem Hochladen des Fotos in den Firebase zurückgegeben wird. Ich brauche die heruntergeladene URL. um es in meiner Datenbank für den Bildpfad zu speichern. Ich stecke hier fest, meine Datenbank bekommt leere Daten für die DownloadURL.

post_news(form: NgForm){ 

    this.title = form.value.title; 
    this.content = form.value.content; 
    this.category = form.value.category; 


    console.log(this.capturedimage1); 


    if(this.capturedimage1 !== ''){ 

     //console.log('captured image is not empty'); 



    let storageRef = firebase.storage().ref(); 

    const filename = Math.floor(Date.now()/1000); 

    const imageRef = storageRef.child(`images/${filename}.jpg`); 

    let uploaded_file_path = `images/${filename}.jpg`;  


    imageRef.putString(this.capturedimage1, firebase.storage.StringFormat.DATA_URL).then(data=>{ 

     this.imageref1 = data.downloadURL; 

    }); 


    } 
} 

Answer 1

So wird dieser Wert gesetzt zu werden - schließlich. Wahrscheinlich haben Sie mit der Tatsache zu kämpfen, dass es passiert, nachdem die umschließende Funktion ausgeführt wurde. Zum Beispiel hier ist ein wirklich einfacher Testfall:

function test(x) { 
    x.a = 1; 
    Promise.resolve(true).then(_ => x.b = 2); 
    console.log(x); 
} 

Der Betrieb,

> test({c: 3}) 
{ c: 3, a: 1 } 
undefined 

protokolliert ein Objekt, das noch nicht b: 2 drin hat, dann kehrt undefined. Dieser Parameter wird eingestellt, natürlich, schließlich:

> test(abc = {c: 3}) 
{ c: 3, a: 1 } 
undefined 
> abc 
{ c: 3, a: 1, b: 2 } 

Um zu verstehen, was wirklich vor sich geht, müssen Sie verstehen, dass alle JS im Fall „Ereignisschleife.“ JavaScript lässt nur eine Sache gleichzeitig zu. Wenn Sie also andere Ereignisse planen, muss JS der Regel folgen: "Führen Sie zuerst alles in dieser Funktion durch und suchen Sie dann nach etwas anderem, das geplant wurde."

Einige Funktionsaufrufe passieren synchron, sie den Funktionsaufruf blockieren, vorwärts zu bewegen, bis sie abgeschlossen ist. Beispiel: [1,2,3].forEach(x => console.log('hello, ' + x)) protokolliert vor dem Abschluss 3 Zeichenfolgen an der Konsole. Aber der ganze Punkt eines versprochenen Werts ist, dass der Computer damit beschäftigt ist, es herauszufinden, es ist noch nicht verfügbar. Daher können Sie nur den Wert tatsächlich benutzen, wenn sie herausgefunden hat, und alle Ihre Manipulationen des Versprechen einschließlich Zugabe eines Zuhörers zu .then() oder .catch() sind asynchrone oder non-blocking. Die aktuelle Funktion wird abgeschlossen, und diese Rückrufe werden in die Ereignisschleife eingefügt, sobald die versprochene Berechnung abgeschlossen ist.

Answer 2

var that = this; 
imageRef.putString(this.capturedimage1, firebase.storage.StringFormat.DATA_URL) 
.then(data=>{  
    that.imageref1 = data.downloadURL; 
    return Promise.resolve(data.downloadURL); 
}) 
.then(function(url){ 
    //make the db call. 
});