Rxjs のtapユーティリティ演算子を使いこなす

tapの使い方

始めに生成演算子をrxjsから持ってきます。
RxJS v6.xでは、UMDモジュール名がRxからrxjsに変更されています。
UMDはUniversal Module Definitionの略語です。
変換演算子mapと
ユーティリティ演算子tapはrxjs/operatorsから持ってきます。

tapの使い方を3ステップで説明します。
①では、pipeのカスタム演算を、
mapだけで処理し、tapは使いません。
②では、
mapとtapを使いますが、簡単な処理だけにします。
③では、
tapでnext、error、completeを使い処理します。

①のコードは、mapで元の配列に4をプラスしますが、
この値は表示しません。
subscribeによって、
さらに配列に10をプラスした後、
表示しています。

const { from } = require('rxjs');
const { map , tap } = require('rxjs/operators');
//①
from([1,2,3])
.pipe(
  map((x)=> x+4)
) 
.subscribe(x => console.log(x+10)); 

【結果】
15
16
17

②のコードは、mapで元の配列に4をプラスし、
tapを使い、演算結果を表示し、
subscribeによって、
さらに配列に10をプラスした後、
表示しています。

配列の値が3つあるので、
上の演算が3回繰り返されます。
配列の値がなくなったとき終了しますが、
終了の表示はありません。

//②
from([1,2,3])
.pipe(
  map((x)=> x+4),  
  tap( console.log) 
) 
.subscribe(x => console.log(x+10)); 

【結果】
5
15
6
16
7
17

③のコードは、②と同じように
演算して、計算結果を表示します。
エラーがなければ、終了したあと、
successfly!を表示します。
エラーがあったときは、
エラーを表示して終了します。

//③
from([1,2,3])
.pipe(
  map((x)=> x+4),  
  tap((next) => console.log(next),
      (error) => console.log(error),
      (complete) => console.log('successfly!'))
 )
.subscribe(x => console.log(x+10)); 

【結果】
5 
15
6
16
7
17
successfly!