カテゴリー
【Rxjs基礎講座】deferとfromでPromiseをObservableへ変換するときの注意点
※ 当ページには【広告/PR】を含む場合があります。
2020/03/13
2022/10/05
Promise
rxjs
Promise
Observable
defer
from
Promise
Observable
deferとfromでコールバック関数の応答が違う
Promise
Observable
defer
from
+ fromオペレーター:
コールバックで返される値のタイミングの調整が不要な場合に利用
+ deferオペレーター:
コールバックで返される値がタイミング・クリティカルな場合に利用
defer
簡単な同期を与えるサンプルプログラム
import { EMPTY, tap, defaultIfEmpty } from 'rxjs';
const empty$ = EMPTY.pipe(
defaultIfEmpty(null),
tap(_ => console.log(new Date())) // 👈ここに到達した時の時間を出力
);
empty$.subscribe();
EMPTY
defaultIfEmpty
tap
2020-03-13T03:47:07.948Z
fromとdeferの比較実験
実験① ~ fromの場合
from
import { EMPTY, from, tap, delay, defaultIfEmpty, switchMap } from 'rxjs';
const empty$ = EMPTY.pipe(
defaultIfEmpty(null),
tap(_ => console.log(new Date())) // 👈ここに到達した時の時間を出力①
);
const from$ = from(new Promise(resolve => {
resolve(new Date()); // 👈ここに到達した時の時間を出力②
})).pipe(
tap(time => console.log(time))
);
empty$.pipe(
delay(2000), // 👈2秒遅らせてfrom$に遷移
switchMap(_ => from$) // 👈from$の内部のPromiseのコールバックは2秒遅れる?遅れない?
).subscribe();
2020-03-13T04:04:11.330Z #①の時間
2020-03-13T04:04:11.329Z #②の時間
empty$
from$
from
実験② ~ deferの場合
defer
import { EMPTY, defer, tap, delay, defaultIfEmpty, switchMap } from 'rxjs';
const empty$ = EMPTY.pipe(
defaultIfEmpty(null),
tap(_ => console.log(new Date())) // 👈ここに到達した時の時間を出力①
);
const defer$ = defer(() => new Promise(resolve => {
resolve(new Date()); // 👈ここに到達した時の時間を出力②
})).pipe(
tap(time => console.log(time))
);
empty$.pipe(
delay(2000), // 👈2秒遅らせてdefer$に遷移
switchMap(_ => defer$) // 👈defer$の内部のPromiseのコールバックは2秒遅れる?遅れない?
).subscribe();
from
from
defer
2020-03-13T04:17:36.233Z #①の時間
2020-03-13T04:17:38.238Z #②の時間
from
subscribe
defer
まとめ
+ fromオペレーター:
コールバックで返される値のタイミングが不要な場合に利用する
+ deferオペレーター:
コールバックで返される値のタイミングが重要な場合に利用する
Promise
Observable
defer
from
defer
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー