Puedes leer la versión en español .

このエピソードでは、我々は観察可能なの我々自身の実装を構築します.このポストの終わりまでに、RXJSのようなライブラリで使用されるこのパターンのより良い理解を得ることを願っています.

観測可能

何ですか。

観測可能な私の定義から始めましょう.

An Observable is a function that follows a convention and is used to connect a data source with a consumer.

データソースは、値を生成するものです.そして、消費者はデータ源から値を受け取る何かです.

楽しい事実

オブザーバブルは怠け者だ

それは絶対に必要なまではどんな仕事もしないだろう.あなたがそれらを購読するまで、何も起こりません.

複数の値を出力できる

データソースに応じて、値の有限数または無限のストリームを受け取ることができます.

それらは同期または非同期

すべては内部実装に依存します.いくつかのデータストリームを同期的に処理したり、時間とともに発生するイベントから1つを作成することができます.

規則

私がオブザーバーブルが慣例に従うと言ったとき、思い出してください?さて、私たちは、私たちの実装が従うという我々自身の任意の規則を作るつもりです.これらは、我々がオブザーバーブルの周りに少し生態系を構築するつもりであるので、重要です.
ここで我々は行きます:

観測可能なインスタンスはsubscribe メソッド.

観測可能な「工場」はsubscriber パラメータとして機能します.

The subscriber 関数はobserver パラメータとしてのオブジェクト.

The observer オブジェクトはこれらのメソッドを実装できますnext , error and complete .

さあ、ものをやろう.

暗号

ファクトリ関数

function Observable(subscriber) {
  return {
    subscribe: observer => subscriber(observer)
  };
}

// I swear to you, this works.

それは思ったより不思議ではない.ここで見るのは、観測可能なファクトリは、購読するまで行われるべき仕事を延期するだけの方法だということです.The subscriber 機能は重い持ち上げをしています、我々が我々がそこで欲しいものは何でもすることができるので、それはよいです.
今まで私は本当に良い仕事を説明していないobserver とsubscriber 役割彼らが行動しているとき、それが明らかになることを願っています.

ユースケース

配列を観測可能に変換したいとします.どうやってこれをできるの?
我々が知っていることについて考えましょう:

我々は、内部のすべてのロジックを行うことができますsubscriber 関数.

3つのメソッドでオブザーバーオブジェクトを期待できます.next , error and complete

オブザーバーオブジェクトの方法を通信チャネルとして用いることができる.The next 関数は、データソースが与える値を受け取ります.The error 我々がそれに投げるどんなエラーも扱うでしょう、それはcatch 関数はPromise クラス.そして、我々はcomplete データソースを使用して値を作成する方法.
観測可能な関数への配列はこのようになります.

function fromArray(arr) {
  return Observable(function(observer) {
    try {
      arr.forEach(value => observer.next(value));
      observer.complete();
    } catch (e) {
      observer.error(e);
    }
  });
}

// This is how we use it

var arrayStream = fromArray([1, 2, 3, 4]);

arrayStream.subscribe({
  next: value => console.log(value),
  error: err => console.error(err),
  complete: () => console.info('Nothing more to give')
});

// And now watch all the action on the console

安全であれ

たった今オブザーバーObjectは基本的に無法な町です.そして、我々にもう一つの価値を送るように、あらゆる種類の怪しいものをすることができましたnext 我々が呼び出した後でさえcomplete メソッド.理想的には、私たちのオブザーバブルには、以下のような保証があります.

オブザーバオブジェクトのメソッドは任意です.

The complete and error メソッドはunsubscribe関数を呼び出す必要があります.

あなたが取り引きするならば、あなたは電話することができませんnext , complete or error .

If the complete or error メソッドが呼び出され、これ以上値が出力されません.

インタラクティブな例

我々は実際にこれまで学んだことでいくつかの興味深いことを始めることができます.この例では、DOMイベントから観測可能なようにするヘルパー関数を作りました.

結論

オブザーバブルは、あなたが観察できるようにする何かを変えることができる創造性の少しで、強力なものです.本当に.約束、AJAX要求、DOMイベント、配列、時間間隔.もう一つの観察可能な(それについて考える秒).あなたが想像することができる何でも、観測可能で包まれることができるデータの源でありえます.

その他の情報源

Learning Observable By Building Observable

Observables, just powerful functions?

このポストのパート2を見ることができます.
お読みありがとうございます.あなたがこの記事を役に立つならば、私の努力を支持したいです.buy me a coffee ☕ .