RxJS Observable.ifは、だから私は、一般的にRxJsや観察可能なパターンに比較的新しいですし、現在提供される機能と、なぜ彼らが行うように動作するのいくつかを理解するために苦労しています両方のステートメント

Question

を実行します。ここで

は、コードスニペットです：

Observable.if(//can also be onErrorResumeNext 
() => true, 
    Observable.fromPromise(
    fetch('/'+ locale + '_state.json', { 
     headers: { 
     'Accept': 'application/json' 
     }, 
     method: 'GET' 
    }).then(res => { 
     if (!res.ok) { 
     throw new Error(res.statusText); 
     } 

     return res.json(); 
    }) 
), 
    Observable.fromPromise(
    fetch('/'+ defaultLocale + '_state.json', { 
     headers: { 
     'Accept': 'application/json' 
     }, 
     method: 'GET' 
    }).then(res => { 
     if (!res.ok) { 
     throw new Error(res.statusText); 
     } 

     return res.json(); 
    }) 
) 
) 

は、なぜこれらのステートメントの両方が実行されますか？私は何かをしている/間違ったやり方でこれに近づいているのですか？ Observable.ifのようなもっと単純なものを返すのはうまくいきますが、RxJsが主に非同期データ用であることを理解する限り、上記の例は同じように動作しませんか？

Observable.mergeMapを使用してObservable.ifとObservable.onErrorResumeNextの動作を書き直すことができますが、私がやったことは終わりですが、ここで何かが不足しているように感じます。

Answer 1

事がpromiseは怠け者ではなく、すぐに実行されるということです。計算が怠惰にする最も簡単な方法にそのような.deferを使用することです：

Observable.if(//can also be onErrorResumeNext 
() => true, 
    Observable.defer(() => 
    fetch('/'+ locale + '_state.json', { 
     headers: { 
     'Accept': 'application/json' 
     }, 
     method: 'GET' 
    }).then(res => { 
     if (!res.ok) { 
     throw new Error(res.statusText); 
     } 

     return res.json(); 
    }) 
), 
    Observable.defer(() => 
    fetch('/'+ defaultLocale + '_state.json', { 
     headers: { 
     'Accept': 'application/json' 
     }, 
     method: 'GET' 
    }).then(res => { 
     if (!res.ok) { 
     throw new Error(res.statusText); 
     } 

     return res.json(); 
    }) 
) 
) 

.defer

が自動的 observableへの約束をアップグレードします。

Answer 2

あなたは二回fetch()を呼び出し、Observable.if()に結果を渡しています。 RxJsはがすでにObservable.if()の前にの両方を呼び出しているので、どちらが呼び出されるかを制御する能力はありません。

あなたObservable.if()の2番目と3番目のパラメータは、重複したコードの多くが含まれています。なぜ同じようにこれを書き換えない：

Observable.if(() => true, locale, defaultLocale) 
.mergeMap(val => 
    fetch('/'+ val + '_state.json', { 
     headers: { 
      'Accept': 'application/json' 
     }, 
     method: 'GET' 
    }).then(res => { 
     if (!res.ok) { 
      throw new Error(res.statusText); 
     } 
      return res.json(); 
    }) 
);