RxJSのswitchMap mergeMap concatMap
JavaScriptRxJSRx
2020年04月12日
公式の図を見てもいまいち理解しづらいこれらのオペレーターを実際に動かしてみて理解したメモ
setup
echo "{}" > package.json
npm i -D rxjs今回はよくあるユースケースとしてキーワード検索をイメージしています。
const { Subject } = require('rxjs');
const { concatMap, mergeMap, switchMap } = require('rxjs/operators');
const subject = new Subject()
const fetch = ({keyword, delay}) => new Promise(resolve => {
setTimeout(() => {
resolve(`response of keyword ${keyword} `)
}, delay)
})
subject
.pipe(
concatMap(delay => fetch(delay)) // ここのoperatorを変更して動作確認する。
)
.subscribe(next => console.log(next))
setTimeout(() => subject.next({keyword: 'a', delay: 300}), 100)
setTimeout(() => subject.next({keyword: 'ab', delay: 100}), 200)
setTimeout(() => subject.next({keyword: 'abc', delay: 100}), 500)これを実行します。
node index.js時間軸を図に表すとこうなります。
| 時間 | 親イベント | 非同期処理 | 出力 |
|---|---|---|---|
| 100 | a | ||
| 200 | ab | ||
| 300 | abの検索が終了 | ||
| 400 | aの検索が終了 | ||
| 500 | abc | ||
| 600 | abc の検索が終了 |
キーワードaでの検索の結果よりabの検索のほうが早くかえってきてしまったようです。
mergeMap
非同期処理が終了した順番に流れる。
response of keyword ab
response of keyword a
response of keyword abcswitchMap
最新のイベントがながれる。
response of keyword ab
response of keyword abcキーワードaの検索結果が返ってきたときの最新のイベントはキーワードabであるので流れない。 キーワード(ab|abc)の検索結果が返ってきたときの最新のイベントはキーワード(ab|abc)であるので流れる。
concatMap
親のイベントが流れた順番にながれる。
response of keyword a
response of keyword ab
response of keyword abc時間いじって試してみると理解できると思います。