iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

打通 RxJS 任督二脈 系列

RxJS 在前端世界的能見度已經越來越高,不管是 Angular、React、Vue 甚至跳脫這些框架都能夠看到它的身影;由於 RxJS 是多個抽象觀念組合而成,因此顯得更加抽象,不少新手學會 subscribe 及一些 operators (可能還錯誤使用) 之後就因太過抽象而棄坑。
但只要能把相關的基礎打好,透過 RxJS 可以輕易寫出高度好讀、好維護的程式碼,處理複雜問題的時候也能更加得心應手,就此棄坑實在是很可惜的事情!本系列文章將分享我在工作時推坑同事 RxJS 的經驗,以及解釋背後真正所需要的基礎知識,幫助大家掌握這些基本觀念,打通 RxJS 任督二脈!

鐵人鍊成 | 共 35 篇文章 | 171 人訂閱 訂閱系列文 RSS系列文 團隊全端開發人員天梯
DAY 21

RxJS 過濾類型 Operators (1) - filter / first / last / single

今天開始我們來介紹「過濾類型」的 operators,「過濾類型」的 operators 主要功能是讓 Observable 資料流內的事件在符合特定條件時才發...

2020-10-06 ‧ 由 黃升煌 Mike 分享
DAY 22

RxJS 過濾類型 Operators (2) - take / takeLast / takeUntil / takeWhile

今天來介紹 take 系列的各種過濾類型 operators。 take take 代表要從來源 Observable 中觸發 N 次事件的值;當訂閱開始後,如...

2020-10-07 ‧ 由 黃升煌 Mike 分享
DAY 23

RxJS 過濾類型 Operators (3) - skip / skipLast / skipUntil / skipWhile

昨天介紹的 take 系列是用來決定要「拿哪些資料」,今天來介紹 skip 系列,越來決定「忽略哪些資料」。 skip skip 可以傳入一個數字,當訂閱開始時...

2020-10-08 ‧ 由 黃升煌 Mike 分享
DAY 24

RxJS 過濾類型 Operators (4) - distinct / distinctUntilChanged / distinctUntilKeyChanged

今天來分享過濾類型的 operators - distinct 系列,這系列的 operators 都是用來避免「重複的事件資料」發生,但各有不同的用處,讓我們...

2020-10-09 ‧ 由 黃升煌 Mike 分享
DAY 25

RxJS 過濾類型 Operators (5) - sampleTime / sample / auditTime / audit / debounceTime / debounce

今天分享的過濾類型 operators 都具有依照時間條件讓原來資料流不要太過頻繁發生件的意味,但各自有不同處理邏輯,有些也比較抽象,建議多看看彈珠圖來理解。...

2020-10-10 ‧ 由 黃升煌 Mike 分享
DAY 26

RxJS 條件/布林類型 Operators (1) - isEmpty / defaultIfEmpty / find / finxIndex / every

今天介紹「條件/布林類型」的 operators,這類型的 operators 都是用來判斷整個 Observable 是否符合某些條件來當作新的 Observ...

2020-10-11 ‧ 由 黃升煌 Mike 分享
DAY 27

RxJS 數學/聚合類型 Operators (1) - min / max / count / reduce

今天要介紹「數學/聚合類型」的 operators,這些 operators 會把來源 Observable 當作一個單純的資料列,取得一些基本的資訊,也可以自...

2020-10-12 ‧ 由 黃升煌 Mike 分享
DAY 28

RxJS 工具類型 Operators (1) - tap / toArray / delay / delayWhen

今天要介紹的是「工具類型」的 Operators,也都不太困難,很好理解,繼續輕鬆學習吧! tap 在之前文章介紹 functional programming...

2020-10-13 ‧ 由 黃升煌 Mike 分享
DAY 29

RxJS 錯誤處理 Operators (1) - catchError / finalize / retry / retryWhen

今天來介紹一些跟「錯誤處理」有關的 operators。在使用 RxJS 時,資料流是透過 pipe 及各式各樣的 operators 在處理,且很多時候是非同...

2020-10-14 ‧ 由 黃升煌 Mike 分享
DAY 30

RxJS Multicast 類 Operator (1) - multicast / publish / refCount / share / shareReplay

還記得之前我們介紹過 Cold Observable v.s. Hot Observable 嗎? Cold Observable 和觀察者 (Observer...

2020-10-15 ‧ 由 黃升煌 Mike 分享