【Rxjs基礎講座】deferとfromでPromiseをObservableへ変換するときの注意点

            
            + fromオペレーター:
    コールバックで返される値のタイミングの調整が不要な場合に利用

+ deferオペレーター:
    コールバックで返される値がタイミング・クリティカルな場合に利用
        

            
            import { EMPTY, tap, defaultIfEmpty } from 'rxjs';

const empty$ = EMPTY.pipe(
    defaultIfEmpty(null),
    tap(_ => console.log(new Date())) // 👈ここに到達した時の時間を出力
);

empty$.subscribe();
        

            
            2020-03-13T03:47:07.948Z
        

            
            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 #②の時間
        

            
            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();
        

            
            2020-03-13T04:17:36.233Z #①の時間
2020-03-13T04:17:38.238Z #②の時間
        

            
            + fromオペレーター:
    コールバックで返される値のタイミングが不要な場合に利用する
+ deferオペレーター:
    コールバックで返される値のタイミングが重要な場合に利用する