rxjs的詳解

這次帶給大家rxjs的詳解，使用rxjs的注意事項有哪些，以下就是實戰案例，一起來看一下。

rxjs(Reactive Extensions for JavaScript)是Javascript的響應式擴展, 響應式的思路是把隨時間不斷變化的資料、狀態、事件等轉成可被觀察的序列(Observable Sequence)，然後訂閱序列中物件的變化，一旦變化，就會執行事先安排好的各種轉換和操作。

rxjs適用於非同步場景，可用於最佳化前端互動中的請求、事件。

rxjs特點

統一非同步程式設計的規範，不管是Promise、ajax或事件，通通封裝成序列(Observable Sequence)，一旦有非同步環節發生變更，觀察序列即可截獲發生變更的資訊。

前端業務層和展現層解耦，例如展現層不需要關心指定事件觸發時和DOM無關的處理邏輯。同時業務層也能組裝非同步操作中多個非同步邏輯之間的關係，無需暴露給展現層。展現層關心的是：非同步操作其中環節的資料變化。

rxjs開發業務層具有高彈性，高穩定性，高即時性等特性。

rxjs實例概念

Observable: 可觀察的資料序列.

Observer: 觀察者實例，決定何時觀察指定資料.

Subscription:觀察資料序列返回訂閱實例.

Operators: Observable的操作方法，包括轉換資料序列，過濾等，所有的Operators方法接受的參數是上一次發送的資料變更的值，而方法返回值稱為發射新資料變更.

Subject: 被觀察對象.

Schedulers: 控制調度並發，即當Observable接受Subject的變更回應時，可以透過scheduler設定回應方式，目前內建的回應可以呼叫Object.keys(Rx.Subject)查看。

Observable四個 生命週期：建立 、訂閱 、執行 、銷毀。

建立Obervable，傳回被觀察的序列來源實例，該實例不具備傳送資料的能力，相較之下透過new Rx.Subject所建立的觀察物件實例具備傳送資料來源的能力。

透過序列來源實例可以訂閱序列發射新資料變更時的回應方法（回呼方法）。

回應的動作其實就是Observable的執行。

透過序列來源實例可以銷毀，而當訂閱方法發生錯誤時也會自動銷毀。

序列來源實例的catch方法可以捕捉訂閱方法發生的錯誤，同時序列來源實例可以接受從catch方法傳回值，作為新的序列來源實例。

rxjs運算子

rxjs中提供了許多運算符，用於建立Observable物件

import Rx from 'rxjs';

# create

let observable = Rx.Observable
    .create((observer)=> {
        observer.next('hello');
        observer.next('world');
    });    
//订阅Observable    observable.subscribe((value)=> {    console.log(value);
});

輸出：hello
    world

of

轉換值變數

let observable = Rx.Observable.of('hello', 'world');
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

輸出：hello
    world
    complete

from

轉換陣列變數

let array = [1, 2, 3];let observable = Rx.Observable.from(array);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

輸出：1

    2     3     complete
fromEvent

轉換事件變數

Rx.Observable.fromEvent(document.querySelector('button'), 'click');
fromPromise

轉換Promise(承諾)變數

let observable = Rx.Observable
.fromPromise(new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve('hello world');
    },3000)
}));
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

輸出：hello world
    complete  

##empty

#empty運算子傳回一個空的Observable，訂閱該物件，它會立即返回complete訊息。

never

never操作子會傳回一個無窮的Observable，訂閱該對象，什麼事情都不會發生，它是一個一直存在卻什麼都不做的Observable物件。

interval

interval運算子支援一個

數值類型的參數，用來表示定時的間隔。

let observable = Rx.Observable.interval(1000);
observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

輸出：0

    1
     2
     ...

上面程式碼表示每隔1s，​​會輸出一個遞增的值，初始值從0開始。

timer

timer運算元支援兩個參數，第一個參數用來設定發送第一個值需等待的時間，第二個參數表示第一次發送後，發送其它值的間隔時間。

let observable = Rx.Observable.timer(1000, 5000);

observable.subscribe({    next: (value)=> {        console.log(value);
    },    complete: ()=> {        console.log('complete');
    },    error: (error)=> {        console.log(error);
    }
});

輸出：0   //1s後

    1   //5s後
    2    /5s後
    ...

Pull vs Push

Pull和Push是資料生產者和資料消費者兩種不同的溝通方式

# Pull

在Pull體系中，數據的消費者決定何時從數據生產者取得數據，而生產者本身並不會意識到什麼時候數據將會被傳送給消費者。

每個JavaScript函數都是一個Pull體系，函數是資料的生產者，呼叫函數的程式碼透過拉出單一的回傳值來消費該資料。
ES6中的iterator迭代器和generator
產生器是另一個Pull體系，呼叫iterator.next()的程式碼是消費者，可從中拉取多個值。

Push

在Push體系中，資料的生產者決定何時發送資料給消費者，消費者不會在接收資料之前意識到它將要接收這個資料。
Promise是最常見的Push體系，一個Promise(資料的生產者)發送一個resolved(成功狀態)或reject(失敗狀態)來執行一個回調(資料消費者)，但是不同於函數的地方的是：Promise決定何時資料才被推送至這個回呼函數。

RxJS引進了Observables(可觀察物件)，一個全新的Push體系。一個可觀察物件是一個產生多值的生產者，當產生新資料的時候，會主動推送給Observer(觀察者)。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

前端開發中的SVG動畫

#一定要了解的TypeScript

以上是rxjs的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！