RXJSスイッチマップによる単純な同期

このポストでは、SwitchMap演算子とは何かを議論します.この演算子を使用して適切な同期を行うにはどうすればよいのでしょうか.更なるADOなしで、飛び込んでください.
SwitchMapが何をするかを定義しましょう、単に公式ドキュメンテーション"Map to observable, complete previous inner observable, emit values"から定義されます

同期
SwitchMapが適用できる単純な要件の例は以下の通りです.

何かが起こるとき、私はこの第2の観察可能なものを呼ぶ必要があります.

// ID Type alias.
type ID = string

// Define a trigger to call the API.
const loadMyData$ = new Subject<ID>();

// Data upon trigger.
const data$ = loadMyData$.pipe(
 switchMap(id => httpGetData(id)) // API request
);

// Some trigger happens
loadMyData$.next("10d27de0-...-62b02cd72468") // trigger to get http data.

SwitchMapを使用するときはいつでも、我々のタスクを他の観測可能なものに渡す.閉じるこの動画はお気に入りから削除されています.この例では、httpgetdata APIリクエストにトリガを渡します.

What if I my trigger is so fast, I don't want to overload my server with API requests?"

次の例では、SwitchMapを使用してキャンセルを調べます.
そして今、SwitchMapの特別な部分については、キャンセルまたは内部観測可能なサブスクリプション.
SwitchMapは内部の観測可能性をキャンセルしたり取り消したりする能力を持っています.この場合、APIリクエストは、例えば完了するまでに時間がかかり、大きな塊や高価なAPIリクエストを取得することができます.

私が複数のAPI呼び出しを引き起こすとき、私は前のAPI呼び出しをキャンセルしたいです.

// Next Image Trigger.
const nextImage$ = new Subject<ID>();
// Get image.
const data$ = nextImage$.pipe(
 switchMap(id => httpGetImage(id)) // supports cancellation internally.
);

観測可能な特別な配線はありません.基本的に最初の例と同じです.

SwitchMapを使用しない場合
観測可能なものを渡すか、切り換える他の代替演算子があります.これは例えばカートにアイテムを追加するときに便利です.APIを呼び出すとき、SwitchMapを使用している場合には有用ではないかもしれませんが、最初に必要条件をチェックしてください.

マップ演算子
マップは、値を変換するだけであり、タスクを別の観測対象にする必要はありません

const date$ = dateTrigger$.pipe(
 map(stringDate => new Date(stringDate))
);

// Should be equal to
const date$ = dateTrigger$.pipe(
 switchMap(stringDate => of(new Date(stringDate)))
);

なぜトリガー後にコンコーを使用しない?
Contactは、第2の観測可能性を引き起こす前に、最初に観測可能であるのを待ちます.多くの場合、ソースが観測可能であるという完成が全くありえないので、第2の観測可能なものを全く呼びません.

個人嗜好
不確実性に直面するとき、私はSwitchMapを最初に、ソースが間隔であるかどうかにかかわらずAPIを呼ぶことに関して特別に観察可能なステッチに最初に使いたいです、あるいは、マニュアルクリックトリガー、それから、それから、私は同期要件を評価します.

ボーナス
署名はmonad operator bindに似ています.
これまで読んでいただきありがとうございます、私はあなたが以下に何を考えて知っている.

参考文献

SwitchMap参照:https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap#map-to-observable-complete-previous-inner-observable-emit-values

のイメージ旗:https://cdn.pixabay.com/photo/2017/03/27/13/55/lost-places-2178884_960_720.jpg