カテゴリー
【Rxjs基礎講座】concatMapを使った同期処理を行う
※ 当ページには【広告/PR】を含む場合があります。
2019/11/24
2022/10/05
package.json~8.2.0Map
初段目のObservable
concatMap0 > 1 > 2 > 3
const base_obs = from([0, 1, 2, 3]);
const firststage_obs = base_obs.pipe(
// x: 0 > 1 > 2 > 3
tap(x => console.log(`Input: [x: ${x}]`)),
map(x => x + 1)
);
console.log('============== 1st stage ==============');
firststage_obs.subscribe(val => console.log(`Result: ${val}`));
============== 1st stage ==============
Input: [x: 0]
Result: 1
Input: [x: 1]
Result: 2
Input: [x: 2]
Result: 3
Input: [x: 3]
Result: 4
同期処理 ・ ストリームの２段目をつける場合
concatMap
const base_obs = from([0, 1, 2, 3]);
const sub_obs = from([0, 1, 2, 3, 4]);
const secondstage_obs = base_obs.pipe(
// x: 0 > 1 > 2 > 3
concatMap(x => sub_obs.pipe(
// y: 0 > 1 > 2 > 3 > 4
tap(y => console.log(`Input: [x: ${x}, y: ${y}]`)),
map(y => 5 * x + y)
))
);
console.log('============== 2nd stage ==============');
secondstage_obs.subscribe(val => console.log(`Result: ${val}`));
============== 2nd stage ==============
Input: [x: 0, y: 0]
Result: 0
Input: [x: 0, y: 1]
Result: 1
Input: [x: 0, y: 2]
Result: 2
Input: [x: 0, y: 3]
Result: 3
Input: [x: 0, y: 4]
Result: 4
#....中略
Result: 17
Input: [x: 3, y: 3]
Result: 18
Input: [x: 3, y: 4]
Result: 19
concatMap同期処理 ・ ストリーム3段目をつける場合
const base_obs = from([0, 1, 2, 3]);
const sub_obs = from([0, 1, 2, 3, 4]);
const subsub_obs = from([0, 1, 2, 3, 4, 5]);
const thirdstage_obs = base_obs.pipe(
// x: 0 > 1 > 2 > 3
concatMap(x => sub_obs.pipe(
// y: 0 > 1 > 2 > 3 > 4
concatMap(y => subsub_obs.pipe(
// z: 0 > 1 > 2 > 3 > 4 > 5
tap(z => console.log(`Input: [x: ${x}, y: ${y}, z: ${z}]`)),
map(z => 6 * 5 * x + 6 * y + z)
))
))
);
console.log('============== 3rd stage ==============');
thirdstage_obs.subscribe(val => console.log(`Result: ${val}`));
============== 3rd stage ==============
Input: [x: 0, y: 0, z: 0]
Result: 0
Input: [x: 0, y: 0, z: 1]
Result: 1
Input: [x: 0, y: 0, z: 2]
Result: 2
Input: [x: 0, y: 0, z: 3]
Result: 3
Input: [x: 0, y: 0, z: 4]
Result: 4
#....中略
Input: [x: 3, y: 4, z: 0]
Result: 114
Input: [x: 3, y: 4, z: 1]
Result: 115
Input: [x: 3, y: 4, z: 2]
Result: 116
Input: [x: 3, y: 4, z: 3]
Result: 117
Input: [x: 3, y: 4, z: 4]
Result: 118
Input: [x: 3, y: 4, z: 5]
Result: 119
まとめ
concatMapその他のリンク記事
関連記事
【Rxjs基礎講座】RxJSのMap系メソッドをコーディングしながら具体的にどう違うか考えてみる
2022/10/05
ID#:53
rxjs map系オペレータ
【Rxjs基礎講座】RxJSのMap系メソッドをコーディングしながら具体的にどう違うか考えてみる
RxJSでよく使う主要なMap系のメソッドの同期・非同期の振る舞いの違いを軽いテストコードを介して調べてみます。
クリックするとリンク先へ飛びます関連記事
【Rxjs基礎講座】deferとfromでPromiseをObservableへ変換するときの注意点
2022/10/05
ID#:70
Rxjs defer from
【Rxjs基礎講座】deferとfromでPromiseをObservableへ変換するときの注意点
Promiseベースで書かれた外部ライブラリをRxjsでも利用したい場合にdeferとfromでObservableへ変換する時の注意点を考えていきます。
クリックするとリンク先へ飛びます記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー