2016-10-20 9 views
1

私は非常に単純なコードを持っていますが、私はそれを理解することができません。Angular2約束を混同した

私はので、私は、Webページ上のユーザー名とディスプレイをログに記録を取得するには、以下のやっている現在のユーザー名に

を返すサービスを提供しています。現在ログインしているユーザーは「デモ」です

this.userData.getUsername().then(value => { 
this.username = value ; 
console.log("Inside -->" + value); 
}); 
console.log("Outside -- >" + this.username); 

これで、このコードを実行しました。私は、これは、両方のケースでは、この表示「デモ」
Outside -- >undefined Inside -->demo
にconsole.log Shoulnd'tの出力であるthis.username

にユーザ名を得ることはありません。 (内側と外側) なぜ外側が未定義ですか?

ご理解ください。

+1

呼び出しが非同期であるためです。それは 'getUsername()'メソッドの実行を開始しますが、実行している間は続行されます。だから 'this.username'が未定義の外部ログを最初にヒットし、メソッドが終了してInsideログを取得します –

+0

Angular 2には何も関係ありません。これは非同期呼び出しが動作する方法です(https ://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) –

答えて

2

これは予期された動作です。

その間の実行は非同期呼び出しが最終的に完了するとPromiseが関数に

value => { 
    this.username = value ; 
    console.log("Inside -->" + value); 
} 

を実行し、ここで

console.log("Outside -- >" + this.username); 

続け、これは後で

this.userData.getUsername().then(value => { 
    this.username = value ; 
    console.log("Inside -->" + value); 
}); 

を返す非同期呼び出しですそれは先に渡された。

+0

ありがとうございました。グローバル変数(this.username)のユーザー名を取得するにはどうすればよいですか? – viks

+1

これはあなたのコードがすでに行っていることです。あなたが混乱しているように見えるのは、いつ何が起こるかです。 'this.username = value;'はかなり後に実行されます。 'console.log(" Outside-> "this.username);' –

+1

これが見つかりました。私はちょうど混乱して、次のステップをコードしませんでした。私は実際に変数で正しい値を得ています。ちょうど自分自身を信頼する必要があります。 – viks