RxJSのswitchMap mergeMap concatMap

公式の図を見てもいまいち理解しづらいこれらのオペレーターを実際に動かしてみて理解したメモ

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(args => fetch(args)) // ここの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 abc

switchMap

最新のイベントがながれる。

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

時間いじって試してみると理解できると思います。