プロミスの返品データをクラス変数に割り当てることはできませんか？

Question

私は変数に約束返された値を割り当てようとしていますが、割り当てていません。私はconsole.log（this.imageref1）の時でもまだ空文字列を取得しています。 ここでの目的は、firebaseに写真をアップロードした後に返されるdata.downloadURLを取得することです。私はダウンロードしたURLが必要です。イメージパスのために私のデータベースにそれを保存する。私はここで立ち往生しています、私のデータベースは、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

だから、その値が設定されつつある - 最終的に。おそらく、囲み機能が実行された後に起こっているという事実と闘っているかもしれません。その後、

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

操作、

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

はまだそれにb: 2を持っていないオブジェクトを記録しますundefinedを返します。たとえば、ここでは本当に簡単なテストケースです。そのパラメータが最終的に、当然のことながら、設定されている：

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

本当に何が起こっているかを理解するには、すべてのJSが内で発生することを理解する必要がある「イベントループ。」 JavaScriptでは、一度に1つのことしか実行できないため、他のイベントのスケジュールを設定するときには、JSは「この関数のすべてを最初に実行し、次に実行する予定のものを見つけます」というルールに従わなければなりません。

いくつかの関数呼び出しが同期が起こる、彼らが完了するまで、彼らは前進してから関数呼び出しをブロック。たとえば、[1,2,3].forEach(x => console.log('hello, ' + x))は、完了する前に3つの文字列をコンソールに記録します。しかし、の全ポイントは、という値は、コンピュータがそれを見つけ出すのに忙しくて、それはまだ利用できないということです。したがって、あなただけ実際にそれが出た、と.then()または.catch()にリスナーを追加するなど、約束のあなたの操作のすべてだ後、値を使用し非同期かを非ブロックされていることができます。現在の関数が完了し、これらのコールバックがイベントループに置かれ、約束された計算が完了したときに発生します。

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