RxJS v6.5の新機能

この投稿では、 RxJS 6.5.0の最新バージョンの新機能と改善点について説明します。

新しいfromFetchステートメント

RxJSは、 AbortControllerを使用してリクエストを中断する機能など、ネイティブフェッチ APIのネイティブサポートを提供するようになりました 。

import { of } from 'rxjs'; import { switchMap, catchError } from 'rxjs/operators'; import { fromFetch } from 'rxjs/fetch'; const users$ = fromFetch('https://reqres.in/api/users').pipe( switchMap(response => { if (response.ok) { return response.json(); } else { return of({ error: true, message: `Error ${response.status}` }); } }), catchError((error) => of({ error: true, message: error.message })) ); users$.subscribe({ next(data) { ... }, complete() { ... } }); 

拡張されたforkJoinステートメント

私はそれが一番好きだった。 forkJoinステートメントは、ソースディクショナリを受け入れるようになりました。

 import { forkJoin, timer } from 'rxjs'; import { take, mapTo } from 'rxjs/operators'; const source = forkJoin({ todos: timer(500).pipe(mapTo([{ title: 'RxJS'}])), user: timer(500).pipe(mapTo({ id: 1 })) }); source.subscribe({ next({ todos, user }) { } }); 

さらに、 forkJoin(a, b, c, d)の形式でこの演算子を使用することは推奨されません;代わりに、 forkJoin([a, b, c, d])を記述する必要があります。

 // DEPRECATED forkJoin(of(1), of(2)).subscribe(); // use an array instead forkJoin([of(1), of(2)]).subscribe(); 

パーティションオブザーバブル

既存のpartition文は非推奨になり、新しい親オブザーバブルpartition文にpartition 。
Partitionは、ソースオブジェクトをobservable型の2つのオブジェクトに分割します。1つは指定された述語を満たす値用で、もう1つは満たさない値用です。

 import { fromEvent, partition } from 'rxjs'; const clicks$ = fromEvent(document, 'click'); const [clicksOnH1$, clicksElsewhere$] = partition(clicks$, event => event.target.tagName === 'H1'); clicksOnH1$.subscribe({ next() { console.log('clicked on h1') } }); clicksElsewhere$ .subscribe({ next() { console.log('Other clicked') } }); 

composeLatestは非推奨ステータスに移行しました

新しいバージョンでは、 combineLatest([a, b, c])除き、 combineLatestシグネチャを使用しなくなりました。 この変更の理由をここで読んでください 。

プランナー

scheduledステートメントを使用して、既存のオブザーバブルのスケジューラーを構成します。 from 、 rangeおよびその他のステートメントの計画（スケジューラーをパラメーターとして使用する）バージョンは非推奨です。

 import { of, scheduled, asapScheduler } from 'rxjs'; console.log(1); // DEPRECATED // of(2, asapScheduler).subscribe({ // next(value) { // console.log(value); // } // }); scheduled(of(2), asapScheduler).subscribe({ next(value) { console.log(value); } }); console.log(3)