http呼び出しからの観察可能なリターンを処理する方法を理解する

Question

私はちょうどhttp呼び出しを行うAngular 2アプリを使い始めました。これでObservablesが紹介されました。私はまだそれらに対処する方法を学ぶのに苦労している、ドキュメントは少し初心者のために欠けている。

getValue() {   
     let headers = new Headers({ 'Content-Type': 'text/plain' }); 
     let options = new RequestOptions({ headers: headers }); 
     return this.http.get('http://url/boolean.json', options) 
} 

これはブール値を返すget呼び出しです。これは、私が遭遇する困難を説明する簡単な例です。今、私は本能的に私はこのような変数を割り当てることができることを期待する機能で、この値を使用したい場合：

let varName = this.getValue() 

明らかにこれができない、私は順番に観測可能な出力を得るためにすることを読んであなたはそれを購読する必要があります。私の関数getValue（）が観測値ではなくブール値を返すようにする可能性はありますか？しかし、この場合、ブール値を持つ必要があるだけなので、非同期プログラミングが意味をなさないかどうかはわかりません。まるでこれが長い時間がかかるようなことではありません。この非同期的な振る舞いを取り除く方法もありますか？（このような単純な関数の場合？）

Answer 1

あなたはAngular2のasyncパイプを使用して擬似同期モードを「シミュレート」することができる：

<div>{{value | async}}</div> 

この場合valueは、HTTPレスポンスのコンテンツ観察とではありません。

このようにAngular2はあなたのためにサブスクライブし、対応するサブスクリプションを管理します。データが受信されると、それに応じてテンプレートが更新されます。

非同期モードは、基本的なAPI（XMLHttpRequest）がHTTPリクエスト（およびより一般的にはJavaScript）を実行する方法であるため、実際には非同期モードをバイパスすることはできません。

Rx/Observablesがチェーン処理にとって本当に強力であることがわかります。たとえば、flatMapのような演算子を利用することができ、チェーンの最後でのみ購読することができます。ここではサンプルです：

this.getValue().flatMap((data) => { 
    // return another observable 
    return this.getAnotherRequest(); 
}).subscribe((data) => { 
    // data is the result of the second request 
}); 

このRxのチュートリアルはあなたを助けることができる：

• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

編集

ここでオペレータを活用する方法です：

this.getCurrentUser().flatMap((user) => { 
    // return another observable 
    return this.getData(user); 
}).subscribe((data) => { 
    // data is the result of the second request 
}, (err) => { 
    // no current user, ... 
});