rxjs recipes:’forkJoin’angular

での一括ネットワーク要求の完了の進行状況—この投稿は私のStackOverflowアクティビティの延長です:-)。

質問:

forkJoinのように累積的な結果を得るために一緒に観測値のリストを収集する方法はありますが、終了している間に何らかの進歩を得る

カスタムRxJS関数を作成するための素晴らしいタスク。 それを実装しましょう!

forkJoin(…sources:any):Observable<any>

ObservableInputArrayまたはObservableInputの辞書Objectを受け入れ、値の配列を出力するObservableを返します。渡された配列、または渡された辞書と同じ形状の値の辞書。

つまり、Forkjoin For ObservablesはPromiseと同じように動作します。すべては約束のために働く。

ここに大理石の図があります:

たとえば、いくつかのusersListの詳細をフェッチします(APIがユーザーごとのフェッチのみをサポートしている場合)。

ここに例があります:

スニペットリンク

ここで遊ぶためのcodepenリンクです。
うまくいきますが、すでにいくつの要求が解決されているかなどの中間情報を知る必要がある場合はどうすればよいですか? 現在のforkJoinの実装では不可能ですが、独自のバージョンを作成することはできますか?.
さて、このforkJoinWithPercentがどのように動作するかは簡単な議題です:
出力:
1. これは、2つのObservableの配列を出力する高次(HO)Observable()を返します。

<>コピー
*Higher-order (HO) Observable - observable that emits other observables, so data flow should be handled with special flattening operators like mergeMap, switchMap, concatMap, etc... you can read more about it here and here.

2.
3. finalResult$-最後に値の最後の配列を出力します(またはobservable引数がエラー値を出力する場合はエラー)。
:

スニペットリンク

実装の詳細:

  1. forkJointWithProgress関数はObservableの配列を受け入れ、高次のObservableを返す必要があります。
  2. この返されたObservableは値を出力する必要があります(そのためにof()を使用します)
  3. 副作用は、引数Observablesの配列内の各項目に追加され、完了の割合を計算し、特別なpercent$でこの値を出力します(パーセンテージ計算にはfinalize演算子を使用し、subjectをpercent$として使用します)。
  4. finalResult$は、標準のRxJS forkJoin結果を提供します。
  5. Result Observableは、各サブスクライバに対して独立して動作する必要があります(各サブスクライバに対してクリーンな実行を提供するためにRxJS defer関数を使用して機能をラップします—このケースの詳細はこちらを読むことができます)。
  6. 引数Observablesの一部がエラーを発する場合、それはfinalResult subscribers subscriberに伝播されます。

Packtpub.com そして、私はあなたがこの素晴らしいライブラリであなたの毎日の開発者のタスクを解決する方法の他の多くの詳細とrxjsコース全体を用意しました。 これは、初心者のための興味深いことができますが、また、高度なトピックが含まれています。 見てみて!

実装

#1-2Observableの配列を受け入れ、高次のObservableを返す必要があります。

さて、私たちの将来の機能の足跡だけです:

スニペットリンク

Arrayofobservables(ajax observables)が得られたので、要求されたロジックを反復して追加しましょう:

#3引数Observablesに副作用を追加し、パーセンテージを計算します。

ここに私たちが持っているものがあります:

スニペットリンク

配列内の引数オブザーバブルに機能を追加します。 配列を反復処理し、各observableにfinalize演算子を適用します。

演算子は特定の観測値が完了するまで待機し、完了した観測値の割合を計算し、percent$Subjectで値を出力します。

#4最終結果値を取得するためにforkJoinを呼び出してみましょう

snipper link

Ok、このコードを見てみましょう:
forkJoinは引数observablesの配列を取得し、それらのすべてを購読し、完了するまで待機します。
結果の準備ができたら、タップ演算子は最後のパーセント値(100%)を出力し、パーセント↑件名を完了します(メモリリークを防ぐため)。
最終的な結果は購読者に放出されます。

5この関数をすべて’defer’にラップ

RxJS defer関数は、各サブスクライバに対して新しい観測可能なインスタンス(コールバック関数の結果)を提供します。 これは、各サブスクライバーがクリーンラン(およびcounter=0)を取得することを意味します。

:

  1. observablesの配列(line1)を取得します。
  2. Rxjs deferで結果をラップして、各サブスクライバに対してクリーンランを提供します(行3)
  3. 完了率を計算し、percent$Subjectをemit percent値にインスタンス化するカウンタを作成します(行5-6)。
  4. 元の配列を反復処理し、finalizeで新しい機能を追加して新しい配列を作成します-パーセンテージ値を計算し、オブザーバブルの一部が完了した場合にそれを (8-15行目)
  5. Rx forkJoinを呼び出し、forkJoinが最終結果を取得したときにパーセンテージ100を送信できるようにタップ演算子を適用します。 結果をfinalResult$variableに代入します(17-22行目)。
  6. は、出力する高次のobservableを返します。

をラップするには

ここでは、codepenでどのように動作するかです:

forkJoinWithPercent

Angularで使用するのはどうですか?このセクションへのリンク

この関数はnpmパッケージとしても公開されています—rxjs-toolboxので、プロジェクトで使用できます。

そして、ここでは、そのパッケージを使用して負荷バーにパーセンテージ値をフィードするStackblitz Angularデモがあります:

角で

追加の読み取り。

RxJS演算子の使用例については、こちらを参照してください:

  1. “再試行と繰り返し”
  2. “Rxjs:Managing Operator State”By Nicholas Jamieson.
  3. “RxJS’repeat’operator—beginner necromancer guide”
  4. “rxjsを使用した複数のユーザーからの通知の調整”
  5. Rxjs-toolkit—Rxjs Everyday Custom Operators By Jason Awbrey.
  6. backoff-rxjs—Alex Okrushkoによるバックオフ戦略に対処するための有用なRxJS演算子のコレクション。

この記事のように? のは、Twitterで連絡を取り続けてみましょう!

私のRxJSビデオコースの進歩スタッフのセクション4から始まる—あなたはすでにRxJSに精通している場合—あなたは同様にあなたのために有用な何かを見つ それを試してみる!

*この記事を見直し、それをより良くするために多くの貴重な発言をしてくれたLars Gyrup Brink Nielsen、Nicholas Jamieson、Tim Deschryver、Michael Karénに感謝します!

コミュニティと議論する

コメントを残す

メールアドレスが公開されることはありません。