基本的幾個(gè)操作符

• of

  of操作的參數(shù)依次輸出所有的數(shù)據(jù)凸椿，此時(shí)是同步的塞蹭。

  let stream$ = Rx.Observable.of(1,2,3,4,5)
  

• from

  from操作符的參數(shù)為數(shù)組捕儒。

  let stream$ = Rx.Observable.from([1,2,3,3,5])
  

• do

  let stream$ = Rx.Observable.of(1,2,3,4).do(value => console.log(value))
  

  調(diào)試Observable使用

• filter

  過(guò)濾操作

  let stream$ = Rx.Observable.of(1,2,3,4,5)
  .do(value => console.log(value))
  .filter((value) => value % 2 === 0);
  
  stream$.subscribe(value => console.log('value',value))
  

高階Observable操作符

• flatMap

對(duì)比理解 高階函數(shù) 一個(gè)函數(shù)返回的還是一個(gè)函數(shù)宿稀。首先根據(jù)舊Observable的每個(gè)值重新產(chǎn)生一個(gè)新的Observable届案，然后flatMap重新將這些metastream的流中流變扁平

let stream$ = Rx.Observable.of(1,2,3)
.flatMap(val => {
    return Rx.Observable.of(val)
            .ajax({url: url})
            .map(e => e.response)
})

• switchMap

  類似于 mergeMap臭埋，但是當(dāng)源 Observable 發(fā)出值時(shí)會(huì)取消內(nèi)部 Observable 先前的所有訂閱 弱睦。

  在實(shí)際開(kāi)發(fā)中百姓，常用于級(jí)聯(lián)調(diào)用。

  依賴調(diào)用意味這調(diào)用需要按照順序執(zhí)行况木，調(diào)用B必須再調(diào)用A執(zhí)行返回后垒拢，

  開(kāi)發(fā)場(chǎng)景：

  • 用戶需要先登錄
  • 然后獲取用戶詳情
  • 然后可以獲取用戶訂單

  let stream$ = Rx.Observable.of({message:'Login in'})
  .switchMap(result => {
    return Rx.Observable.of({id:1,name:'user'})
  }).switchMap(user => {
    return Rx.Observable.from([
      {id:114,userId:1},
      {id:117,userId:1}
    ])
  })
  
  stream$.subscribe(orders => console.log('Order',orders))
  

組合操作符

• combineLatest

通常多個(gè)的Observable的組合在一起，我們通常需要使用組合操作符來(lái)組合兩個(gè)或者兩個(gè)以上的source

let source1 = Rx.Observable.interval(100).map(val => 'source1' + val).take(5);

let source2 = Rx.Observable.interval(50).map(val => 'source2' + val).take(2);

let stream$ = Rx.Observable.combineLatest(source1, source2);

stream$.subscribe(data => console.log(data));

業(yè)務(wù)場(chǎng)景

當(dāng)你對(duì)每一個(gè)source的最新值都感興趣的時(shí)候火惊，而對(duì)之前的值不感興趣的時(shí)候求类，可以選擇使用使用combineLatest操作符來(lái)使用了。

• concat

  按照順序來(lái)發(fā)送Observable

  const getOne$ = Rx.Observable.timer(3000).mapTo({id:1});
  const getTwo$ = Rx.Observable.timer(1000).mapTo({id:2});
  
  Rx.Observable.concat(getOne$,getTwo$).subscribe(res => console.log(res));
  

  concat按照順序來(lái)講兩個(gè)或者兩個(gè)以上的Observable來(lái)組合起來(lái)屹耐，其中是嚴(yán)格的按照順序來(lái)發(fā)送結(jié)果尸疆。

• merge

  merge將所有的流都合并在一起， 要點(diǎn)是這個(gè)操作符組合了幾個(gè)流，并且就像你在上面所看到的一樣寿弱，任何像 delay() 這樣的時(shí)間操作符都是起作用的犯眠。 而這個(gè)在concat上是不會(huì)起作用的。

  const getOne$ = Rx.Observable.of(1).delay(500);
  const getTwo$ = Rx.Observable.of(2,2,3,4,5);
  
  const merge$ = Rx.Observable.merge(getOne$,getTwo$).subscribe(value => console.log(value));
  

• forkJoin

  Rxjs版本的Promise.all 方法症革，別讓我知道直到所有的 Observables 都完成了筐咧，然后再一次性的給我所有的值。(以數(shù)組的形式)

  const getOne$ = Rx.Observable.timer(3000).mapTo({id:1});
  const getTwo$ = Rx.Observable.timer(1000).mapTo({id:2});
  
  Rx.Observable.forkJoin(getOne$,getTwo$).subscribe(results => console.log(results));
  

• zip

  采用的是以列為基礎(chǔ)連接值的方式來(lái)組合Observable, 如果最后一個(gè)參數(shù)是一個(gè)函數(shù)的話則將幾個(gè)Observable的值都提取出來(lái)給函數(shù)傳參來(lái)處理噪矛。 依次從每一個(gè)Source的相同位置獲取值量蕊， 一般返回為數(shù)組。如果沒(méi)法湊齊一組則拋棄其他的值艇挨。

  常規(guī)的用法

  const one$ = Rx.Observable.of(1,2,3);
  const two$ = Rx.Observable.of(4,5);
  const three$ = Rx.Observable.of(6,7);
  
  Rx.Observable.zip(one$,two$,three$).subscribe(value => console.log(value));
  

  zip帶參數(shù)的使用方法

  const name$ = Rx.Observable.of('finch','wukong','zheng');
  const age$ = Rx.Observable.of(12,15,18);
  const address$ = Rx.Observable.of('shenzhen','wuhan','HK');
  
  Rx.Observable.zip(name$,age$,address$,(name,age,address) => ({name,age,address})).subscribe(value => console.log(value));
  

  ?

時(shí)間操作符

• timer

  1. 參數(shù)為一個(gè)

     const getValue$ = Rx.Observable.timer(500);
     getValue$.subscribe(value => console.log(value));
     

     延遲發(fā)送一個(gè)數(shù)據(jù)残炮，然后結(jié)束所有的數(shù)據(jù)。

  2. 參數(shù)為兩個(gè)

     const getValue$ = Rx.Observable.timer(2000,100);
     getValue$.subscribe(value => console.log(value));
     // 首先延遲2S發(fā)送一個(gè) 然后每隔0.1S發(fā)送一個(gè)數(shù)據(jù)
     

• Interval

  因?yàn)檫@個(gè)操作符會(huì)不停地生成值缩滨，所以傾向于和 take() 操作符一起使用势就，這樣可以在調(diào)用它之前限制生成值的數(shù)量，就像這樣：

  const getValue$ = Rx.Observable.interval(100).take(5)
  

  每隔0.1s發(fā)出一個(gè)值 然后獲取其中的前五個(gè)

• delay

  延遲發(fā)送Source每一個(gè)的數(shù)據(jù)楷怒。

  const getValue$ = Rx.Observable.interval(100).take(5);
  getValue$.delay(500).subscribe(value => console.log(value));
  

• debounceTime

  Debounce 是一個(gè)已知的概念蛋勺，特別是當(dāng)你敲擊鍵盤的時(shí)候瓦灶。就像是在說(shuō)鸠删，我們不在乎你的每次敲擊鍵盤，但是一旦你停止打字后的一段時(shí)間是我們所關(guān)心的贼陶。

  業(yè)務(wù)場(chǎng)景

  在GUI編程中刃泡，比較常見(jiàn)的快速雙擊按鈕是一個(gè)比較常見(jiàn)的功能需求，通常為了用戶體驗(yàn)我們需要將過(guò)于快速的輸入省略碉怔，直到用戶停止輸入然后我們才開(kāi)始接下來(lái)的操作烘贴。

  const input = document.getElementById('input');
  
  const example = Rx.Observable
    .fromEvent(input, 'keyup')
    .map(i => i.currentTarget.value);
  
  // 在兩次敲擊鍵盤事件之間，有0.5秒的等待時(shí)間撮胧，如果時(shí)間小于0.5秒則丟棄前一個(gè)敲擊鍵盤事件
  const debouncedInput = example.debounceTime(500);
  
  const subscribe = debouncedInput.subscribe(val => {
    console.log(`Debounced Input: ${val}`);
  });
  

  上面的代碼只會(huì)輸出一個(gè)值桨踪，值來(lái)源于 input 表單，在你停止打字后的500毫秒后芹啥，才值得它報(bào)告一下锻离，也就是發(fā)出一個(gè)值。