2016-03-14 8 views
5

私はリアクティブプログラミングでは新しいですが、私は理解できないこれらすべての記事を少し読んでいます。Javascriptによるリアクティブプログラミング

実際、Nodejs、Angularjs、Angular 2、Reactのjavascript開発者です。

私は何

私は、コールバックより良いテスト容易性...リモートデータフェッチ、ローカル非同期解像度などのために、約束のすべての時間を使用して、私のニーズに合います。

私はストリームは、特定の場合を除いて、私を救うことができる場所、私は理解することはできませんストリーム

を使用して理解してどのような。

この特別なケースでは、約束が1回だけ解決されるため、ストリームをリッスンしている間は約束を使用できません。 SocketIoと

例:

io.on('connection', (socket) => { 
    // this works 
}); 

io.on('connection').then((socket) => { 
    // this can't work, promise would be resolved only once 
}); 

私は間違っていないメートルならば、私は単に、観察を返すことによって、このケースを管理するために、反応性のストリームを使用することができます。右 ?私は周りの角2とすべてのものを勉強メートル

を理解していない何

。実際には、多くのブログから、人々は観測データを使ってリモートデータを取得していますが、私は何が約束の代わりにそれを使う利点があるのか​​理解できません。

実際、私は両方の場合のようにリモコンを作る必要があるので、なぜ他のものよりも1つ多いのですか?これはパフォーマンスの問題ですか?

あなたは全体の質問を読んでいれば、私は

が必要なもの、私は必要なもののリモート・データ・フェッチの場合には反応性プログラミングの代わりの約束を使用することの利点が何であるかを理解することですか?

(他のケースでは)通常のものより反応性のあるものを使用する方がよいでしょうか?

+0

ロットHTTPSを明確にし、この問題を読む:// githubの.com/angular/angular/issues/5876 –

答えて

3

基本的に、非同期イベントが1つしかない場合は、通知(コールバック)を受け取らない場合は、Promiseを使用します。あなたはイベントがPromiseObservableObservable

利点を使用する一連のを期待していた場合

  • 観察可能にキャンセルすることができ
  • 観測可能である
  • 観察可能な缶を(に加入される前に、何もしない)怠惰Promiseができることを行うだけで、の代わりにrx演算子を使用すると、1つのイベントや一連のイベントが予想される場合でも、同じ方法でコードすることができます。
+0

こんにちは!私はこれが古い答えであることを知っていますが、私がおそらく不明な点は1つです。 observablesは、すでに解決済みの約束がすぐに '.then()' dになる方法と同様に、後の加入者の戻り値を保持できますか?また、観測に複数の加入者を置くこともできます(例えば、非同期呼び出しを2回行うなど)。自分自身の質問に値すると思うなら、私はそうすることができます。 – Katana314

+0

'BehaviorSubject'は新しい加入者に直ちに最後の値を返す' Observable'を作成します。 '.share()'演算子は 'Observable'マルチキャストを行い、各イベントは各サブスクライバに渡されます。注 - 演算子( 'map'、' share'など)を明示的にインポートする必要があります。 –

6

@Günterは、観測可能性の基盤、特に約束された約束の能力を与えました。

もう少し行くためには、オブザーバブルの主な利点は、オペレータを使用して非同期のデータフロー/ストリームを構築できることです。ここで

は、いくつかの具体的な使用例です:

  • debounceTime/switchMap。フォームの入力を利用して、対応するHTTPリクエストに基づいてリストをフィルタリングする場合、リクエストに使用する必要がある値は、ユーザーが書き込みを終了したときの値です。いくつかのリクエストを送信する必要はありません。新しいキャラクタごとに1つ(1つは ''、1つは 'so'、1つはsom、1つは検索するもの)。 debounceTimeオペレータは、イベントをバッファリングしてこれを許可し、一定時間後に最後のイベントを提供します。ここで

    はサンプルです:

    @Component({ 
        (...) 
        template: ` 
        <input [ngFormControl]="ctrl"/> 
        ` 
    }) 
    export class MyComponent { 
        constructor() { 
        this.ctrl = new Control(); 
        this.ctrl.valueChanges 
           .debounceTime(500) 
           .distinctUntilChanged() 
           .switchMap((vallue: string) => { 
           // Get data according to the filled value 
           return this.service.getData(entry); 
           }) 
           .subscribe(data => { 
           // Update the linked list 
           this.list = data; 
           }); 
        } 
    } 
    

    だけswitchMapを使用する場合は、入力ごとに1つの要求がありますが、以前の進行中の要求はキャンセルされます。これにより、特にリクエストの実行時間がより長い場合に、正しい結果を得ることができます。

    この場合、Web UI(DOMイベント)のイベントをHTTPリクエストにリンクし、それに応じて(イベントに反応して)実行し、いくつかの高度な動作を適用できます。

  • 再試行を実装します。異なる部分を非同期処理チェーン/データフロー及びリンク:retryWhendelaytimeout演算子を混合することにより、簡単に(かつ透過的に)再試行

    searchPlaces(searchText:string) { 
        var params = new URLSearchParams(); 
        params.set('placename_startsWith', searchText); 
        params.set('username', 'templth'); 
    
        return this.http.get('http://api.geonames.org/postalCodeSearchJSON', 
         { search: params }) 
        .retryWhen(error => error.delay(500)) 
        .timeout(2000, return new Error('delay exceeded')) 
        .map(res => res.json().postalCodes); 
    } 
    

私は、これは観測の本当の力があると思いを実装することができますイベントに基づいてアプリケーションのこれは、約束ではできないもので、アプリケーションをより堅牢にするためにユースケースを実装することができます。ここで

はあなたの詳細を与えることができる一連の記事です:

関連する問題