5分未満でRXJSオブザーバブルを明らかにすること

ほとんどの人は、自分自身を含むRxJS 初めて開発されたオブザーバブルAngular アプリケーション.Observables フレームワークの重要な要素ですあなたはあまりそれらを使用せずに行うことはできません.例えば、HTTP requests 結果を観測可能で返します.このように、あなたはそれがちょうど別の空想のバリエーションであると思うことができますPromises 他の何のためにも使用しないでください.あなたがこれをするならば、時々奇妙なことは起こります:HTTP要求は複数回、あるいは、彼らがそうでなければならないとき、または、ランダムな順序で起こります.このチュートリアルでは、どのようにオブザーバブルがどのように動作し、角度をより生産的でリラックスして開発を理解する方法を教えてくれます.

約束する

別の約束の実装として角度でHTTPリクエストを見始めるには、良い出発点と誤解を招くものも同様にすることができます.それらのAPIはいくぶん似ています、両方とも結果とエラーを聞くために成功と失敗コールバックを提供します.

const observable = api.callWithObservable();
const promise = api.callWithPromise();

observable.subscribe(
  result => { /* on success */ },
  error => { /* on error */ }
);

promise.then(
  result => { /* on success */ },
  error => { /* on error */ }
);

関数呼び出しで操作を開始し、返された観測可能/約束は、結果/エラーを後で出力します.類似点はここで始まり終わります.他のすべて-実行、結果の数、および動作-異なる.

複数結果

約束は一度だけ結果を放つ、オブザーバブルは時間をかけて複数の値を発することができます.

const observable = Rx.Observable.interval(1000).take(5);

observable.subscribe(
  result => console.log(result),
  error => { /* on error */ },
  () => { /* on complete */ }
);

上記の例では、観測可能な値は0、1、2、3、4を1秒間遅延して終了する.購読メソッドは、5回と呼ばれ、その値の他に、ストリームの終わりを検出することもできます.完了すると、3番目のコールバックがsubscribe関数の内部で呼び出されます.その後、観測可能な値を発することはありません.
時間をかけて値を出力すると、観測結果はストリーム(例えばnode . js)に非常に似ています.また、2つの別々のストリームまたはバッファリング(マージ、バッファー)をマージするような類似したメソッドを持っていることがわかりました.

同期実行

約束が解決されると、その後のコールバックは非同期と呼ばれます.JavaScriptイベントループ内では、次のコールバックが次のサイクルで実行されます.逆に、観測可能な値のサブスクリプションは、値が渡された後に同期的に実行されます.

let promiseResult;
Promise.resolve(15).then(val => { 
  promiseResult = val;
  console.log('resolved promise', val);
});
console.log('result promise', promiseResult); // result promise undefined

let observableResult;
Rx.Observable.of(15).subscribe(val => {
  observableResult = val;
  console.log('resolved observable', val);
});
console.log('result observable', observableResult); // result observable 15

この例を実行すると、コンソールで印刷するときに、そのときのコールバック内の値が未定義であることがわかります.ログ.一方、購読コールバック内の値は未定義ではなく、コンソールで出力される.ログ.
この同期実行は、次のメソッドを呼び出すときにも対象となります.

const subject = new Rx.Subject();

let observableResult;
subject.subscribe(val => {
  observableResult = val;
  console.log('resolved observable', val);
});

subject.next(15);
console.log('result observable', observableResult); // result observable 15

解決されたログは、コンソールで結果の前に表示されます.

複数の実行

あなたは、何度も観察可能に購読するとき、ものが変になるということを経験しましたか?HTTPリクエストで例えば複数回実行されるような?
これは、購読メソッドが呼び出されると、オブザーバブルに対して別々の実行が作成されるためです.そして、その実行がHTTP要求から成るなら、エンドポイントは再び呼ばれます.

const observable = Rx.Observable.interval(1000).take(5);

observable
  .subscribe(x => console.log('A next ' + x)); // create an execution

setTimeout(() => {
  observable
    .subscribe(x => console.log('B next ' + x)); // create an execution
}, 2000);

// A next 0
// A next 1
// B next 0
// A next 2
// B next 1
// A next 3

2秒後に到着する2番目のサブスクリプション(B)が最初のサブスクリプションと同じ値を受け取ることを期待します.しかし、実際には、Bはスタートから値を得ます.この背後にある理由は、すべての購読メソッドが新しい実行を作成し、以前のものとは別のオブザーバブルを再起動することです.
約束は、同じ約束に複数のメソッドを書くときに再起動しません非同期的に実行し、同じ値を取得します.Objectablesで同じ動作を作成するには、共有演算子を適用しなければなりません.バックグラウンドでは、演算子は対象を作成し、その値を渡します.

配列メソッド

約束は、返された値を突然変異させるメソッドだけを持ちますが、オブザーバブルには複数のメソッドがあります.これらのメソッドは、配列メソッドと非常によく似ています.

promise
  .then(value => value + 5)
  .then(value => Promise.resolve(9));

observable.pipe(
  map(value => value + 5),
  flatMap(value => Rx.Observable.of(9)),
  filter(value => value > 5)
);

メソッドの内部では、新しい値または新しい約束を返すことができます.それは同じ働きます;次のメソッドは、以前に返された値を取得します.オブザーバブルでは、同期(MAP)と非同期(flatmap)変換を分離しなければなりません.オブザーバブルには、多くの配列メソッド(フィルタ、縮小、結合、包含など)、およびユーティリティライブラリからの配列メソッドがあります

まだ明確ではない？

私がオブザーバーブルを学んでいたとき.the RxMarbles site それは、彼らを明瞭にしたものでした.RxMarblesは、観測可能な構成の動作を記述するタイムライン上のグラフィカルな表現です.別の色は、さまざまなイベントがソースから来て、どのように振る舞うことを意味します.

概要

約束を通してオブザーバブルを理解することができますが、違いを知る必要があります.

複数の値

同期コールバック

複数の実行

メソッドのような配列

うまくいけば、上記の比較はオブザーバーブルの誤解と不明瞭な部分を明らかにしました.更なる学習のために、私はblog of André Staltz (RXJSのコア貢献者)と彼の音を聞くtutorials on Egghead .