コマンド式からレスポンス式(三)まで


前回は応答式で使われているデザインモデルについて話しましたが、今日は主にrxjsの応答式を実現する三大規模のもの、Observable、subjectとSubscriptionを見にきました.
Observable--見るべき測定シーケンス
最初のセクションでは、pushタイプのシステムとpullタイプのシステムを紹介しましたが、それらはすべて値を生成できます.
単一の値を生成
複数の値を生成
pull
機能
iterator
プッシュする
プロミス
?
ES 6においてpromiseはすでに原生に支持されていますが、Pushシステムに複数の値を生成するための原生的な方法はありませんので、Observableはこの空白を追加しました.
//     observable
const observable = Rx.Observable.create(function(observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    setTimeout(() => {
        observer.next(4);
        observer.complete();
    },1000);
});

console.log('just before subscribe');

//    subscribe       observable    
observable.subscribe({
    next: x => console.log('got value ' + x),
    error: err => console.error('something wrong occurred: ' + err),
    complete: () => console.log('done'),
});

console.log('just after subscribe);
このコードを実行すると次のような結果が得られます.
just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done
その結果から、私達は一回の購読によって、一つのobservableに全部送ってきた値を手に入れることができます.また、出力の順番を見てください.1、2、3はafterの前にあります.4はafterの後にあります.これはobservableの発行する値が全部非同期であるとは限らないということです.
上のコードの中にまだいくつかのところがあります.説明が必要かもしれません.
  • create:それは実際にObservableの構造関数の別名であり、言い換えればnew Rx.Observable(…)に取って代わることができる.
  • observer:観察者は、名前の通り、これは私たちが前に述べた観察者モードの中の観察者です.ここではrxjsが私たちに伝達を担当しています.実際にはsubscribeに入ってきたその対象です.それは3つの方法があります.nextは次の値を通知するために使います.error方法は、observable上でエラーが発生した場合、観察者に通知し、complettee方法は、観察者に現在のストリーム上の値が送信されたことを通知するために使用される.
  • subscribe:Observable類が提供する方法であり、観測可能なシーケンス上で発行される値を取得し、観察者をパラメータとして受信する.もちろん、上のコードはobservable.subscribe(
    x => console.log('got value ' + x),
    err => console.error('something wrong occurred: ' + err),
    () => console.log('done'),
    )と書くことができます.
  • 第一のパラメータ処理next通知、第二のパラメータ処理error通知、第三のパラメータ処理complette通知、私達はまた、error通知とcomplette通知を処理するかどうかを選択できます.つまり、第二、三のパラメータは省略されます.もちろんrxjs内部では、私たちが入ってきたパラメータをその観察者の対象に処理します.
    上記のコードの中で、私達は実際にobservableの作成(createを通じて)を完了しました.購読(subscribeを通じて)、nextとcompletteを呼び出します.それ以外に、私達が購読しなくても、観察者は安全に退出できるはずです.
    subscription
    これは私達が購読をキャンセルする時に使うものです.上の購読コードの完全な書き方は以下の通りです.
    const subscription = observable.subscribe({...});
    
    これは私たちがバベルを購読して得たものです.つまりsubscribe方法の戻り値です.上には3つの重要な方法があります.
  • unsubscribeは名前の通り、購読をキャンセルします.
  • addにもう一つのsubscriptionを追加します.いくつかのsubscriptionがある時、私達はこの方法でそれらをリンクしてもいいです.このようにキャンセルする時は一つだけキャンセルして、各subscriptionのunsubscribe方法を呼び出す必要はありません.
  • removeはもちろん追加できます.現在のsubscriptionから他のsubscription/キャンセル前の購読subscription.unsubscribeを除去します.前に作成したobservableを再購読して、購読をキャンセルする時に、それらのunsubscribe方法const subscription 1=observable.subscribeを一つ一つ呼び出します.const subscription 2=observable.subscribe({…);const subscription 3=observable.subscribe({…)//再購読する前に作成したobservableは、購読をキャンセルする時に一回だけunsubscribeconst subドル=observable.subscribe(...)
    .add(observable.subscribe({...}))
    .add(observable.subscribe({...}));
    
  • を呼び出します.
    subject
    それはつまりobservableで、observerで、だからそれはsubscribeにまたnextを通すことができて、error、completteeに値を発射します.次の例では、Subjectに2つの観測者を追加し、いくつかの値を追加します.
    const subject = new Rx.Subject();
    
    subject.subscribe({
        next: v => console.log('observerA: ' + v)
    });
    
    subject.subscribe({
        next: v => console.log('observerB: ' + v)
    });
    
    subject.next(1);
    subject.next(2);
    
    実行後の出力:
    observerA: 1
    observerB: 1
    observerA: 2
    observerB: 2
       Subject      Observer ,             Observable  subscribe  :
    
    var subject = new Rx.Subject();
    
    subject.subscribe({
        next: v => console.log('observerA: ' + v)
    });
    
    subject.subscribe({
        next: v => console.log('observerB: ' + v)
    });
    
    var observable = Rx.Observable.from([1,2,3]);
    
    observable.subscribe(subject); //    Subject       Observable
    
    実行後出力:
    observerA: 1
    observerB: 1
    observerA: 2
    observerB: 2
    observerA: 3
    observerB: 3
    
    上記の方法によって、私達は基本的にSubjectを利用してユニキャストのObservableをマルチキャストに変換しました.この例は、1つの実行コンテキストを複数の観察者に共有する方法を示すにすぎない.
    上のコードの中にfromの方法があります.その役割は観測可能なシーケンスを作ることです.前のcreateのような方法ですが、もっと簡潔で、rxjsには専門的な名前をオペレータといいます.様々なオペレータを通して観測可能なシーケンスの作成とシリアルのデータの様々な変換ができます.rxjsを使う時、私たちはほとんどの時に様々な操作符を使っています.