如何理解RXJS（1）——observable的建立

前言

網上關於RXJS的教程甚多，我本身在第一次遇到observable變量的時候，也是比較疑惑，以前用慣了promise，對於observable以及其餘RXJS相關的用法有些懵逼。我認爲，在學習rxjs的相關api和具體用法以前，應該先理解它的工做原理。 總得來講，observable變量和promise有着不少類似的地方，他們都是處理異步事件的工具，但也有着很大的區別，弄清楚這些區別很是重要。在開始以前，我建議咱們應該先去了解下面這些基礎知識（不要求熟練掌握，但要有一個概念）

幾個概念

函數式編程

事實上，相似於() => { }這樣的用法，就是典型的函數式編程。它將函數做爲一個參數使用，也能夠賦值給一個變量，做爲其餘函數的返回值等等。在咱們後面的例子中，你必定會見到不少這樣的使用情形。

觀察者模式和迭代器模式

這二者在咱們今天討論的話題裏是一個合做的關係，在咱們一會使用rxjs處理各類異步事件的時候，就會深入地理解這兩種設計的模式的含義。 簡單來講，觀察者模式就是——A發佈消息，B，C，D接收消息。可是注意，這裏的BCD是對A進行了一個訂閱，就像你如今充了騰訊視頻的會員，那麼通常默認你會續訂，除非你告訴它「我從下個月開始就不訂了」或者「我要是沒錢了你就別幫我續訂了」，不然的話，你會一直對A處於訂閱的狀態。爲何我要跟大家強調這一點，一會的一個應用場景你就明白了。 迭代器模式就好理解多了，顧名思義，就是對一個數據對象內的元素進行按順序的遍歷操做，咱們遇到的數組的foreach()方法，就是一個典型的迭代器模式。

Push與Pull

推與拉？沒錯，就是推與拉。這兩個反義的動詞生動形象地描述了數據生產者和數據消費者的關係。 咱們首先來講拉。數據消費者決定本身何時須要數據，而後從生產者那裏「拉」過來。好比咱們熟知的js函數，就是在咱們的代碼中須要調用的時候，纔會去消費預先定義好的函數。 好了，在創建了以上概念之後，咱們就能夠進入一些關於rxjs的實際練習了。 observable的使用主要就是藉助一系列的operator進行，咱們在下面看一下。

observable的建立

創造observable——creation operators

1.create

咱們能夠經過create方法來建立observable變量，並制定一系列被觀察者被訂閱後的事件。 這裏，咱們對create方法對應的函數傳入參數observer，你能夠這樣理解：用於observable採用的是push的方法，也就是說，observable纔是主動的一方！所以這裏咱們create出來的observable能夠對觀察者observer進行一系列的響應事件，這些事件，是由create函數裏面的定義實現的。

source_create = Observable.create(function (observer) {
  observer.next('Carl');
  observer.next('David');
  setTimeout(() => {
    console.log('after 1 second');
    observer.next('Evan');
  }, 1000);
});

當咱們對上面的observable進行訂閱後：

this.source_create.subscribe(function (value) {
      console.log(value);
    });

會獲得這樣的輸出：Carl, David (一秒後) Evan。

2.of

咱們能夠經過observable.of來對數據進行同步的發射。結合前面經過create方法，看看observable的異步特性。

source_of = Observable.of('Andy', 'Billy');

這裏咱們聲明source_of，讓它同步發射Andy, Billy。而且咱們在上面的source_create以後進行訂閱。以下代碼：

this.source_create.subscribe((value) => {
      console.log(value);
    });
this.source_of.subscribe((value) => {
      console.log(value);
    });

咱們能夠獲得這樣的結果：

能夠看到，經過create方法定義中的observer.next方法，發送的值是異步的，Evan會在 Andy和Billy以後進行輸出，緣由是咱們設置1秒的timeout，這個時間內，代碼會運行到source_of的訂閱。

3.from

observable.from方法能夠對字符串和數組進行異步的發送。

source_from = Observable.from('The pulp fiction');

而且咱們對observer進行這樣的定義：

this.source_from.subscribe({
      next: (value) => console.log(value),
      complete: () => console.log('Complete'),
      });

咱們對結果進行輸出可得：

這裏能夠看到the pulp fiction依次輸出，在最後咱們看到了subscribe中定義的complete方法輸出的‘Complete’。這是由於咱們在subscribe中定義了complete方法的內容，所以，當source_from的next方法檢測到沒有結果以後，則會調用observer的complete方法！（你不妨試試，若是不定義complete方法，結果會是怎樣的）

上面說到的create, of, from都是observable的建立方法，能夠建立不一樣形式的數據發佈流。我之因此叫它作數據發佈流，就是由於咱們使用不一樣方法，數據流產生的時間，同異步，間隔，觸發方式等等都有區別，就像不一樣的發佈方式同樣，能夠是月刊，季刊，批發，本身一本本買等等！這樣說，你明白了嗎？這就是observable的建立。 要使用上述方法，記得引入rxjs/add/observable/xxx，來獲取這些api（除了以上說的三種，還有不少，根據須要查看doc便可）

參考內容： RXJS關於Observable的講解， npmJS中的Rxjs基本說明