iT邦幫忙

0

RxJS Operators - concatMap , switchMap

WM 2019-12-31 08:25:40809 瀏覽

concatMap

concatMap可以看成是 map + concatAll

html

<button #click>click</button>

component.ts

export class Page1Component implements OnInit {
  @ViewChild('click', { static: true }) click: ElementRef;
  
  source: Observable<any>; 
 
  example: Observable<any>;

  constructor() { }

  ngOnInit() {   
    this.source = fromEvent(this.click.nativeElement, 'click');
    this.example = this.source.pipe(concatMap(() => interval(1000).pipe(take(3))));
    this.example.subscribe(v => console.log(v));
  }
}

將click事件轉換成observable。
事件觸發後,concatMap裡的callback function會每隔一秒,依序送出0、1、2。

https://ithelp.ithome.com.tw/upload/images/20191231/20112573OuMaWHZIWN.png

若在3秒內連續點擊的話
https://ithelp.ithome.com.tw/upload/images/20191231/20112573QusQqKaOwC.png

會發現,先送出一組012,再送出下一組012,並不會有互相穿插的情況發生。

官網的彈珠圖
https://ithelp.ithome.com.tw/upload/images/20191231/20112573xIbDNuwEZv.png

當callback function還在處理元素為3的observable期間,下一個元素5的observable已經送出在等候,但依舊得等元素3處理完後,才能處理元素5。

concatMap重要特性:
它會先等一個observable完成後,再繼續訂閱下一個observable。
意思就是,每個待處理的observable都得乖乖排隊,前一個處理完,才能繼續下一個。

switchMap

將上面範例的concatMap改成switchMap即可。

只觸發一次click事件,依舊每隔一秒,依序送出0、1、2,跟concatMap一樣。

若在3秒內連續點擊的話
https://ithelp.ithome.com.tw/upload/images/20191231/20112573h68CXzfoLG.png

會發現,第一個observable並未送出2,而是直接處理下一個observable。

官網的彈珠圖
https://ithelp.ithome.com.tw/upload/images/20191231/20112573v5QBI79m6B.png

當callback function還在處理元素為3的observable期間,下一個元素5的observable已經送出,這時就不再處理元素為3的observable,改為處理元素5的observable。

switchMap重要特性:
只要有新的observable送出,就會取消訂閱前一個observable,轉為處理新的observable。

參考資料:
Rxjs-concatMap
Rxjs-switchMap


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言