首頁 > web前端 > js教程 > 主體

Rxjs的使用詳解

php中世界最好的语言
發布: 2018-03-12 15:46:00
原創
2927 人瀏覽過

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

一個可觀察物件的執行期間,零個到無限多個next通知被發送。如果Error或Complete通知一旦被發送,此後將不再發送任何值。

可觀察物件嚴格的堅守這個契約,所以,下面的程式碼將不會發送包含數值4的next通知

var observable = Rx.Observable.create(function subscribe(observer) {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
observer.next(4); // Is not delivered because it would violate the contract});
登入後複製

不失為一個好方式的是,使用try/catch語句包裹通知語句,如果捕獲了異常將會發送一個錯誤通知。

var observable = Rx.Observable.create(function subscribe(observer) {try {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
} catch (err) {
observer.error(err); // delivers an error if it caught one}
});
登入後複製

取消訂閱 unsubscribe()

由於可觀察物件的執行可能是無限的(不停地next),而對於觀察者來說卻往往希望在有限的時間內終止執行,因此我們需要一個API來取消執行。

var observable = Rx.Observable.from([10, 20, 30]);var subscription = observable.subscribe(x => console.log(x));// Later:subscription.unsubscribe ();

在你訂閱了之後,你將會得到一個Subscription對象,它表示正在進行的執行。大膽的去使用unsubscribe()去終止執行吧。

observer觀察者

什麼是觀察者?觀察者是可觀察物件所發送資料的消費者,觀察者簡單而言是一組回呼函數 , 分別對應一種被可觀察物件發送的通知的類型:next, error和complete。以下是一個典型的觀察者對象的例子:

var observer={next:x=>console.log('Observer got a next value: ' + x),error: err => console.error('Observer got an error: ' + err),complete: () => console.log('Observer got a complete notification')
}
登入後複製

觀察者不過是三個回呼函數組成的對象,每個回調函數分別對應可觀察對象的通知類型。

Subscription訂閱

訂閱物件也可以被放置在一起,因此對訂閱物件的unsubscribe()進行調用,可以對多個訂閱進行取消。做法是:把一個訂閱"加"進另一個訂閱。

var observable1 = Rx.Observable.interval(400);var observable2 = Rx.Observable.interval(300);var subscription = observable1.subscribe(x => console.log('first: ' + x));var childSubscription = observable2.subscribe(x => console.log('second: ' + x));
subscription.add(childSubscription);
setTimeout(() => {// Unsubscribes BOTH subscription and childSubscriptionsubscription.unsubscribe();
}, 1000);
登入後複製

執行之後,我們可以在控制台得到:

second: 0
first: 0
second: 1
first: 1
second: 2
登入後複製

訂閱也有一個remove(otherSubscription)方法,用於解除被add新增的子訂閱。

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

相關閱讀:

js-xlsx的工具類別庫xlsxUtils的使用詳解

##JS的日常常用函數整合
#

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板