Rxjs6學習


一、什么是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。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM