logo

10個最重要的RxJs概念 (RxJS Top Ten - Code This, Not That)

鐘承諭 | 2020年2月20日

RxJS Top Ten - Code This, Not That

RxJS是Javascript 越多越受重視的函式庫,PeraPera團隊找到非常受歡迎的教學影片加了中文字幕,以下是影片大綱整理。

10個最重要的RxJs概念
10個最重要的RxJs概念

 https://www.perapera.ai/watch/youtube-ewcoEYS85Co 

 

 

 

 

RxJS是近來頗受歡迎的函式庫,在npm的每日下載量甚至高過三大前端框架React, Angular與Vue。原因在於JavaScript本身無法滿足處理多個非同步(Async)資料流(Streams of data)的需求,而RxJS函式庫能夠讓我們避開promise只允許單個Async數值的限制與「回呼地獄」(callback hell)。

非同步資料流包含讀取Firebase資料、DOM事件、WebSocket與檔案上傳等。

以下為RxJS的10個重要詞彙與用法介紹:

1. Observable

首先需要導入Observable,可以把Observable想像成是水管,與水源(資料)相接,接著以Subscribe與處理工具(運算子)串接。

Observable會在資料流變化時通知Subscriber,像是以監聽事件進行觀測,並能夠根據不同資料流入提供多個監聽事件分別處理。如果只想針對特定數值進行處理,可以使用’of’串接,但要避免與’from’搞混,’from’可用來處理陣列、promise與Iterable,並分別對每個項目進行處理。另外fromEvent能在每次事件觸發時進行通知、也能加上interval設定發送通知的間隔時間。

 

2. Hot VS Cold

簡單來說Hot Observable可以有多個Subscription,Cold Observable只能有一個Subscription。但其實可以使用shareReplay將Cold Observable的數值分給多個Subscriber,但這不是常用的實作方法。

 

3. Subjects

Subjects像是附有幫浦的hot Observable,能在獲取數值的同時建立新資料流或是驅動事件。Subjects有個陷阱需要留意,必須在獲取數值前先設立subscription才能對資料進行處理,否則會拿不到數值。而BehaviorSubject可以解決此問題,讓遲到的subscriber也都能獲取數值,對state management(狀態管理)很有幫助。(可參考閱讀本文

 

4. Operator(運算子)

可用來控制Observable的資料流。影片介紹如何同時運用map, filter, scan等常見運算子,處理從pipe接出來的資料。

 

5. Tap

Tap能夠進到pipe內部對接到的資料流進行處理,例如影片前面部分都只在最後才callback 印出處理完的結果,若使用tap(print)則能印出pipe內不同位置資料處理前後的變化。如果是處理firebase傳回的資料,也可以tap搭配async await進行非同步處理。

 

6. Backpressure

當Observable發出的通知過多超出我們所需,就稱作Backpressure。有兩個RxJS運算子可以幫助解決Backpressure,第一個是防抖(debounce),可在事件觸發後持續等待一段時間才處理。另一個方式是節流(throttle),能夠在固定時間內,只處理第一個監聽到的事件。但如果不想過濾掉太多資料,並想要存取所有觸發事件,則可以使用buffered,它能建立陣列並搜集所有事件,並能設置陣列中達到多少項目時才發射。

 

7. Switchmap

可將一個Observable從中途切換到另一個,適合用在一個資料的取用需要根據前一項獲取資料才能決定的情境。以firebase 登入App為例,我們需要將Observable設置在觀測使用者的登入id後,才能回到資料庫查詢符合該id的相關資料。這時可以先用pipe連結使用者id,接著在內部使用switchMap,在獲取使用者id後才進到資料庫抓資料。

 

8. Combine

用於將多個Observable組合成單一資料流。可將多筆Observable資料彙集在一個陣列中,再加上delayed設置延遲時間,就能讓蒐集完的資料在同一時間回傳,如果不想設置延遲,則可以使用merge,每收到一筆資料就會回傳

 

9. Errors

在pipe內設置catchError就能除錯,而retry則能馬上對error進行處理,在http除錯時相當方便。

 

10. Memory Leaks

RxJS有兩個常用防止記憶體流失的方法,一個是unsubscribe,設置條件式並建立unsubscribe中止Observable回傳。另一個方法為takeWhile,能夠在pipe之後直接設立中止回傳的條件,不需要另外取消subscription。takeUntil則可設定在Observable取得特定回傳值時,中止與資料流的subscription。

 

鐘承諭

從記者轉職前端工程師,在日本泰國遊歷

相關文章

秋天的日本有著燦爛的模樣。日本四季分明的氣候,讓旅人在不同的時刻來訪,都能瞥見多樣的風景,邁入10月,山林與樹梢便漸漸染上紅、黃、橘的色彩,假日時和家人、戀人、朋友一塊兒結伴賞紅葉(もみじ)與銀...

天涼好個秋!賞紅葉、銀杏的最佳時節

秋天的日本有著燦爛的模樣。日本四季分明的氣候,讓旅人在不同的時刻來訪,都能瞥見多樣的風景,邁入10月,山林與樹梢便漸漸染上紅、黃、橘的色彩,假日時和家人、戀人、朋友一塊兒結伴賞紅葉(もみじ)與銀杏(いちょう),也成為最合時宜的熱門活動。 > ![momiji01](//images.ctfassets.net/6i1c1nl7bhgx/6pWj3hSxMcKaEcQWI2gwOk/96b6d607e41f976c8eb47dbeb4291743/momiji01.jpg) > 圖片來源:[photo AC](https://www.photo-ac.com/main/detail/1700651?title=%E7%B4%85%E8%91%89) 雖說日本對大自然的保存與愛護工作做得精準又到位,想要欣賞紅葉或銀杏,漫步在街道上、前往飯店附近的小公園就能輕巧達成,但若更了解相關資訊,必能玩得更盡興。首先,安排行程前,可先注意任何與「紅葉見頃」有關的情報。「見頃」(みごろ)指的是最適合觀賞的時候,最值得參考的來源則是氣象單位於9月底至10月初之間推出的「紅葉前線」(もみじぜんせん),一張圖便能完整觀察全日本的紅葉會在什麼時候變色,一般而言是從北至南、山區至平地的方向推移。紅葉前線會更新數次,在旅程出發前,都可以緊盯變化,做出行程微調。 > ![momiji02](//images.ctfassets.net/6i1c1nl7bhgx/6HsxbKlSTKm0K8EwGA8Q68/e7b61971631a5c41c5419d9f310d05cc/momiji02.jpg) > 北海道大學的黃葉與銀杏(圖片來源:[photo AC](https://www.photo-ac.com/main/detail/616268?title=%E5%8C%97%E5%A4%A7%E3%81%AE%E9%BB%84%E8%91%89%E3%81%A8%E3%82%A4%E3%83%81%E3%83%A7%E3%82%A6%E4%B8%A6%E6%9C%A8)) 其次,可以注意的是有出現「紅葉狩り」(もみじがり)、「紅葉名所」(もみじめいしょ)等字眼的資訊。「狩り」可大膽用漢字來判斷,就是狩獵的意思,原本是針對動物的打獵行為。打獵在過去為貴族間的休閒活動,但也有些不愛打獵、熱愛大自然的貴族們,他們將花草放在手上欣賞品味,所以將紅葉置於掌間觀賞,也就成為一種最有秋意的「紅葉狩り」囉。沿用至現代,則是有為了觀賞紅葉美景,而到處東征西跑的意思。 > ![momiji03](//images.ctfassets.net/6i1c1nl7bhgx/2bQFEDd1ZqqkWcAiI08Yk/450236073baa5e9aa1d6a549a7add9b7/momiji03.jpg) > 京都嵐山的紅葉(圖片來源:[photo AC](https://www.photo-ac.com/main/detail/252727?title=%E4%BA%AC%E9%83%BD%E5%B5%90%E5%B1%B1%E3%81%AE%E7%B4%85%E8%91%89)) 若還不能參透那份閒情雅致的詩意,也不要緊,不會看門道就先看熱鬧,熱門景點的「紅葉名所」,自然是不能放過。賞楓可說是日本的全民運動,如果不喜歡人擠人,就搜尋「穴場」(あなば)這個關鍵字,它指的是比較沒有人知道、卻保持著相當質量的好地方,類似於「私房景點」的概念。蒐集好以上情報,便可以開心出門,享受 場浪漫又多彩的日本秋季之旅囉。 想補充說明的是,站在學習日語的角度來看,「楓」與「紅葉」的說法還能更深入作解釋。華語社會亦常使用的「楓」(かえで),在日本也是用來指楓樹或槭樹的總代稱,有時讀者們也會在漫畫或日劇中聽到,這個字常被用來取作女孩的名字,不過「かえで」的語源可就沒那麼可愛了,一般的說法是從形狀來看,楓葉長得像青蛙的手,「蛙の手」發音為「かえるので」,便簡稱為「かえで」了。「紅葉」分為「もみじ」與「こうよう」兩種發音,前者指的是楓葉由綠轉紅或者轉黃的「狀態」,而後者則是只要植物的葉子變為偏紅色系的色彩,都能稱為「こうよう」,因此也能當做動詞使用。

日本
旅遊