問題タブ [switchmap]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
typescript - パイプを最初に実行した後、RXJS Observable が予期せず完了する
永続的なストアとストレージ アイテムのキーのリストを備えた Angular アプリがあります。アプリの実行中に同期的にアクセスできるように、アプリの起動時に既知のキーの値を永続ストアからメモリに非同期的にロードしたいと考えています。そこで、Observable を作成しました。Observable は、キー リストのすべての要素を反復処理し、パイプをアタッチします。パイプは、各要素の値を取得し、キーと値の組み合わせを渡す必要があるため、それらをキャッシュに格納できます。永続ストレージで値が見つからない場合をキャッチする必要があります。残念ながら、これはキーの 1 つに対してのみ機能します。次に、外側の Observable が予期せず完了します。
ログを見ると、外側の Observable がキー リストの 3 つの要素を正しく反復し、switchMap() を実行していることがわかります。ただし、永続ストレージから値が 1 つだけ取り出され、最初の要素の localStorageService.get()-Observable が完了すると、from-Observable が完了します。
ログには次のように表示されます。
- from() $.next => (2) ["authorizationDataIdToken", 1]
- switchMap(): キー: authorizationDataIdToken
- from() $.next => (2) ["_isAuthorized", 0]
- switchMap(): キー: _isAuthorized
- from() $.next => (2) ["userData", 0]
- switchMap(): キー: userData
- from() $.complete
- localStorageService.get(userData) $.next => [オブジェクト オブジェクト]
- from() - switchMap の後 $.next => (2) ["userData", "[object Object]"]
- OIDC ストレージ: キャッシュ キー: userData、値: [オブジェクト オブジェクト]
- localStorageService.get(userData) $.complete
- from() - switchMap $.complete の後
- OIDC ストレージ: すぐに使用できます。
load-into-cache-function のコードは次のとおりです。
これは、ローカル ストレージ サービスの get() 関数のシグネチャです。
from-Observable が発行するすべての要素に対してローカル ストレージ サービスの get() 関数の呼び出しが実行されることを期待していますが、一度しか呼び出されていないことがわかり、何が間違っていたのかわかりません。