RxJSにおけるObservableのチェーン化
質問
私はRxJSとAngular 2を学んでいます。私は前のものの結果に依存する複数の非同期関数呼び出しを持つプロミスチェーンを持っているとしましょう、それは次のようになります。
var promiseChain = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 1000);
}).then((result) => {
console.log(result);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(result + 2);
}, 1000);
});
}).then((result) => {
console.log(result);
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(result + 3);
}, 1000);
});
});
promiseChain.then((finalResult) => {
console.log(finalResult);
});
プロミスを使わずにRxJSだけで同じことをしようとすると、次のような結果になりました。
var observableChain = Observable.create((observer) => {
setTimeout(() => {
observer.next(1);
observer.complete();
}, 1000);
}).flatMap((result) => {
console.log(result);
return Observable.create((observer) => {
setTimeout(() => {
observer.next(result + 2);
observer.complete()
}, 1000);
});
}).flatMap((result) => {
console.log(result);
return Observable.create((observer) => {
setTimeout(() => {
observer.next(result + 3);
observer.complete()
}, 1000);
});
});
observableChain.subscribe((finalResult) => {
console.log(finalResult);
});
プロミスチェーンと同じ出力が得られます。私の疑問は
-
私はこれを正しく行っていますか?上記のコードにRxJS関連の改善点はありますか?
-
例えば、最後に別の購読を追加すると、1、3、6を表示することを期待しますが、追加の6を生成するだけです。
observableChain.subscribe((finalResult) => {) console.log(finalResult)。 });
observableChain.subscribe((finalResult)=>){。 console.log(finalResult)を実行します。 });
1 3 6 6
どのように解決するのですか?
プロミスの構成とRxjsの比較についてですが、よくある質問なので、SOの過去の質問集を参照してください。
基本的には
flatMap
と同じです。
Promise.then
.
2つ目の質問については、すでに発信された値を再生したいのか、それとも新しい値が到着したときに処理したいのか?最初のケースでは
publishReplay
演算子をチェックしてください。2番目のケースでは、標準的なサブスクリプションで十分です。しかし、ソースによっては、cold.vs hot の二項対立に注意する必要があるかもしれません (cf.
ホットとコールドの観測値 : 'ホット'と'コールド'オペレータはありますか?
を参照してください)。
関連
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み] JSのDateからDay名
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] 変異を伴わないオブジェクトからの値の削除
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ
-
[解決済み] RxJSのシーケンスはpromise.then()と同等か?