一、什么是Rxjs?
Rxjs是ReactiveX編程理念的JavaScript版本。ReactiveX來自微軟,它是一種針對異步數據流的編程。簡單來說,它將一切數據,包括HTTP請求,DOM事件或普通數據包裝成流的形式,然后用強大豐富的操作符對流進行處理,使你能以同步編程的方式處理異步數據,並組合不同的操作符來輕松優雅的實現你所需要的功能。
let observable = Observable.create(observer=>{ observer.next("1"); observer.next("2"); }) console.log("start");
//訂閱observable observable.subscribe(value=>{ console.log(value); }); console.log("end"); //start //1 //2 //end
通過Observable身上的create()方法可以創建一個Observable,參數中的回調函數設置這個Observable將會如何傳遞值,然后通過subscribe訂閱這個Observable。由輸出結果看出,subscribe是同步執行的。
二、Rxjs的operators
1.創建Observable
(1).create
(2).of
創建一個Observable,它會一次發出提供的參數,最后發出完成通知。
(3).from
從一個數組、類數組對象、promise、迭代器對象或者類Observable對象創建一個Observable。
(4).fromPromise
將promise轉化為Observable.
返回一個僅僅發出Promise resolve過的值然后完成的Observable。
如果Promise resolve一個值,輸出Observable發出這個值然后完成。如果Promise被rejected,輸出Observable后發生相應的錯誤。
(5).fromEvent
創建一個Observable,該Observable發出來自給定事件對象的指定類型事件。
(6).empty
創建一個空的Observable,如果訂閱這個Observable,它會立即響應complete函數
(7).throwError(替代之前的throw)
(8).never
一個一直存在卻什么都不做的observable
(9).interval
每隔一段時間發送一個值,0,1,2.....
(10).timer
timer有兩個參數,第一個參數表示到發送第一個值的間隔時間,第二個參數表示從發送第二個參數開始,每發送一個值的間隔時間,如果第二個參數為空,則發送第一個值后,終止,執行complete函數。
2.選擇器
(1).take
獲取前幾個數然后結束(執行complete方法)
(2).first
取第一個數然后結束(執行complete方法)
(3).takeLast
取后邊幾個值然后結束(執行complete方法)
(4).last
取最后一個值然后結束(執行complete方法)
3.控制數據流
(1).takeUntil
參數是一個observable,在某些事件發生時,讓原observable直接完成(complate)
(2).skip
略過前幾個值,取后面的值,略過值的時間仍需等待,如下,需要等待4秒才發出3。
(3).startWith
塞一個初始值給observable
(4).concat
合並操作符,參數必須是observable類型,concat將多個observable串接起來,前一個完成好了,再執行下一個。
(5).concatAll
合並操作符,無參,有時候observable送出的元素又是一個observable,就像二維數組,這時我們就可以用concatAll把它攤平為一維數組。
(6).merge
合並操作符,和concat一樣,區別在於merge處理的observable是異步執行的,沒有先后順序。
(7).delay
delay可以延遲observable一開始發送元素的時間點,參數毫秒,也可以是Date類別的如new Date().getTime() + 1000。
(8).delayWhen
delayWhen的作用和delay的作用很像,最大的差別是delayWhen可以影響每個元素,需要傳入一個callback並回傳一個observable。
(9).debounceTime
每次收到元素,都會先把元素cache住並等待一段時間,如果這段時間沒有收到任何元素,則把元素送出,如果這段時間又收到新元素,則把原本cache住的元素釋放掉並重新計時,不斷反復。
(10).throttleTime
throttleTime和debounceTime的作用都是降低事件的觸發頻率,但行為上有很大的不同。throttle傳入observable,throttleTime傳入毫秒。throttleTime會先開放送出元素,等到有元素被送出就沉默一段時間,等到時間過了又會開放發送元素。
(11).distinct
distinct會過濾掉重復的值。如果傳入一個函數,函數返回值就是distinct比較的值。
(12).distinctUntilChanged
distinctUntilChange只會比較相鄰兩次,把相同的值過濾掉。
4.協調多個Observable
(1).combineLatest
協調多個observable,參數observable中有一個發生變化都會發起訂閱(前提是每個observable都有值)。返回的訂閱值是數組。
(2).zip
當每個傳入zip的流都發射完第一次數據時,zip將這些數據合並成數組並發射出去,當這些流都發射完第二次數據時,zip再次將它們合並成數組並發射。以此類推直到其中某個流發出結束信號,整個被合並后的流結束,不再發射數據。
如果最后一個參數是函數,這個函數用來計算最終發出的值。
(3).withLatestFrom
管道中的方法,默認輸出格式為數組格式,可通過第二個參數進行參數格式組裝。withLatestFrom只有實例操作符的形式,而且所有輸入observable的地位並不相同,調用withLatestFrom的那個observable對象起主導數據產生節奏的作用,作為參數的Observable對象只能貢獻數據,不能控制產生數據的時機。
(4).concatMap
concatMap就是concatAll加上map。