Rxjs 學習入門

定義觀察者

var observer = ,
error: function (error) ,
complete: function () 
}

同時與訂閱者進行繫結

observable.subscribe(observer)

1.1 生產基本資料

var observable = rx.observable
.create(function(observer) )

1.2 如果有現成的資料時, 可以直降將資料輸送給觀察者 , 使用of方法 , 觀察者會依次接受到 1 , 2

var observable =  rx.observable.of(1,2)

1.3 定時給觀察者輸送資料

var observable = rx.observable.create(function(observer)
},1000)
})

1.4 觀察者會每隔1秒接受到數值, 數值是自增從0開始

var observable = rx.observable.interval(1000)

1.5 訂閱者1秒後會傳送第一條資料, 接著每隔5秒傳送一條資料, 資料是數值,自增, 從0開始

var observable = rx.observable.timer(1000,5000)

1.6 觀察者依次會接收到 h e l l o

var observable = rx.observable.from("hello")

1.7 zip可以將兩個流合併,只輸出兩個流在同一時間都輸出的值

var observable = rx.observable.from("hello").zip(rx.observable.interval(1000) , (x , y) => )

1.8 scan 類似於陣列方法 reduce方法

/**
* 觀察者依次接受到的值是,每次接收到的值是間隔1秒
* h* he
* hel
* hell
* hello
*/var observable = rx.observable.from("hello").zip(rx.observable.interval(1000) , (x , y) => ).scan((origin , next) => origin + next)

1.9 兩秒後,觀察者才會接受到資料,接受資料的頻率是300公釐

var observable = rx.observable.interval(300).take(5).delay(2000)

1.10 防抖 debouncetime

觀察者只接收到了乙個資料 . 19
var observable = rx.observable.interval(300).take(20).debouncetime(1000)

1.11 節流 throttletime

var observable = rx.observable.interval(300).take(20).throttletime(1000)

1.12 過濾 distinct, 只取出唯一的值, 每次取值時會吧之前取取出來的值進行對比,如果重複,觀察者者接收不到

var observable = rx.observable.from(["a" , 'b' , "c" , "d" , "e" , "a" , "b" ,"d" ,"w"]).zip(rx.observable.interval(300) , (x , y)  => x ).distinct()

2.1 concatall 這裡有乙個流abc ,經過map方法,生成了3個流的陣列,把生成的資料，依次串聯起

來，發布給觀察者

/**
* 0* 1
* 2* 0
* 1* 2
* 0* 1
* 2*/
var observable = rx.observable.from("abc").map(() => rx.observable.interval(300).take(3)).concatall()

2.1 zip 兩個流同在同一時間產生的資料,派發給觀察者,有點類似於陣列的並集感覺

var observable = rx.observable.interval(300).take(10).zip(rx.observable.interval(1000).take(5) , ( x , y ) => x + y)

2.2 switch 監聽多個流,哪個流有資料產生,就一直監聽那個流,如果此時其他流也有資料,那麼就換一

個另外乙個流去監聽資料, 派發給觀察者

var click = rx.observable.fromevent(document.body, 'click');
var source = click.map(() => rx.observable.interval(1000));
var observable = source.switch();

2.3 merge 同時監聽兩個流，哪個流有資料了就取出來，如果同時都有，同時取出來

2.4 mergearr 同時監聽多個流，與merge類似

3.1 map 對資料重新組合

var source = rx.observable.interval(1000); 
var observable = source.map(x => x + 1)

3.2 mapto 對資料重新賦值成同乙個值

var source = rx.observable.interval(1000);
var observable = source.mapto(2);

3.3 filter 對資料進行過濾

var source = rx.observable.interval(1000);
var observable = source.filter(x => x % 2 === 0);

3.4 catch 對資料的處理，如果有報錯異常，可以捕獲到

var source = rx.observable.from(['a', 'b', 'c', 'd', 2])
.zip(rx.observable.interval(500), (x, y) => x);
var observable = source
.map(x => x.touppercase())
.catch(error => rx.observable.of('h'));

3.5 retry 捕獲到資料處理異常後，可以重新將資料重複的發一遍給觀察者，注意：只有資料處

理異常後，都會重複將資料發給觀察者，次數不限，也可以填寫次數

var source = rx.observable.from(['a', 'b', 'c', 'd', 2])
.zip(rx.observable.interval(500), (x, y) => x);
var observable = source
.map(x => x.touppercase())
.retry();

rxjs入門4之rxjs模式設計

觀察者模式其實在日常編碼中經常遇到，比如dom的事件監聽，如下 function clickhandler event document.body.addeventlistener click clickhandler 簡而言之觀察者模式就如同上有乙個事件源 dom 的click事件也就是ab...

RxJS 學習之旅實現簡易RxJS

本片文章主要通過實現rxjs一些簡單操作符，來進一步了解rxjs 本系列文章你應該了解的函式實現與組合應用初識rxjs與搭建倉庫 rxjs基礎概念與使用操作符篇簡易實現observable 本篇文章可以學到什麼?深入了解observablejs 基礎知識類原型 observable 即r...

rxjs學習筆記

zip 拉鍊式組合合併多個非同步操作，當非同步資料全部獲取後，吐出陣列，並一一對應 concat 操作拼接，將多個非同步操作內容合併，當第乙個非同步資料subscribe後會將結果一起傳遞給下乙個非同步操作，以此類推 merge 也是合併操作，單工作方式是先到先得，不區分位置，只要有資料就會推給...

Rxjs 學習入門

rxjs入門4之rxjs模式設計

RxJS 學習之旅 實現簡易RxJS

rxjs學習筆記

相關推薦

RxJS 學習之旅實現簡易RxJS