TL;DR: RxJS 是一個(gè)強(qiáng)大的 JavaScript 函式庫(kù)，用於管理非同步資料流，簡(jiǎn)化事件處理和 API 互動(dòng)等複雜操作。它使用可觀察量來(lái)表示資料流，使用運(yùn)算子來(lái)轉(zhuǎn)換和操作資料流，並使用訂閱來(lái)對(duì)發(fā)出的值做出反應(yīng)。

在現(xiàn)代 JavaScript 開(kāi)發(fā)的動(dòng)態(tài)環(huán)境中，有效處理非同步操作至關(guān)重要。 RxJS（JavaScript 的響應(yīng)式擴(kuò)充功能）是一個(gè)功能強(qiáng)大的函式庫(kù)，旨在應(yīng)對(duì)這項(xiàng)挑戰(zhàn)，使開(kāi)發(fā)人員能夠優(yōu)雅且精確地管理非同步資料流。

什麼是 RxJS？

RxJS 是一個(gè)函式庫(kù)，可讓開(kāi)發(fā)人員使用可觀察序列來(lái)處理非同步和基於事件的程式。其核心在於反應(yīng)式程式設(shè)計(jì)的概念，這是一種以資料流和變化傳播為中心的範(fàn)式。這種方法在處理使用者介面時(shí)特別有價(jià)值，其中使用者互動(dòng)、資料擷取和應(yīng)用程式狀態(tài)變更等各種事件可以被視為流動(dòng)的資料流。響應(yīng)式程式設(shè)計(jì)不是直接回應(yīng)每個(gè)事件，而是鼓勵(lì)開(kāi)發(fā)人員聲明當(dāng)這些串流中發(fā)生變更時(shí)應(yīng)用程式應(yīng)如何表現(xiàn)。

核心理念

要掌握 RxJS 的強(qiáng)大功能，必須了解其基本建置模組：

• Observables：Observables 是 RxJS 的核心，代表隨著時(shí)間的推移發(fā)出數(shù)值的資料來(lái)源。它們可以從各種來(lái)源創(chuàng)建，包括事件、承諾和現(xiàn)有數(shù)據(jù)。將可觀察對(duì)象視為資料流動(dòng)的管道。
• 觀察者：觀察者是訂閱可觀察對(duì)象並定義如何對(duì)發(fā)出的值做出反應(yīng)的對(duì)象。它充當(dāng)監(jiān)聽(tīng)器，指示新資料到達(dá)時(shí)要採(cǎi)取的操作。
• 訂閱：訂閱代表觀察者和可觀察物件之間的連結(jié)。它就像一個(gè)合約，允許觀察者從可觀察對(duì)像中接收值。當(dāng)您訂閱可觀察對(duì)象時(shí)，您將開(kāi)始接收數(shù)據(jù)，直到您明確取消訂閱為止。
• 運(yùn)算子：運(yùn)算子是純函數(shù)，可以實(shí)現(xiàn)可觀察量的轉(zhuǎn)換、過(guò)濾和組合。它們充當(dāng)修飾符，塑造和細(xì)化流經(jīng)可觀察流的資料。它們提供了一種聲明性的方式來(lái)操作資料流，而無(wú)需修改原始來(lái)源。

冷觀測(cè)值與熱觀測(cè)值

RxJS 中的 Observable 可以分為冷或熱：

• 冷可觀察物件是按需建立的，並且僅在訂閱時(shí)才開(kāi)始發(fā)出值。每個(gè)新的訂閱都會(huì)觸發(fā)可觀察對(duì)象的新執(zhí)行。例如，從 HTTP 請(qǐng)求創(chuàng)建的可觀察量被認(rèn)為是冷的，因?yàn)樗鼉H在訂閱者表達(dá)興趣時(shí)才發(fā)出請(qǐng)求。
• 熱門(mén)可觀察對(duì)象 獨(dú)立於訂閱而存在，並且無(wú)論是否有人在監(jiān)聽(tīng)都發(fā)出值。它們代表了所有訂閱者之間共享的持續(xù)資料流。例如滑鼠事件或股票行情，無(wú)論觀察者數(shù)量如何，資料流都會(huì)繼續(xù)。

讓我們用簡(jiǎn)單的例子來(lái)說(shuō)明這些概念。

創(chuàng)建一個(gè)可觀察對(duì)象

在此範(fàn)例中，first5Numbers$ 是一個(gè)冷 observable，發(fā)出數(shù)字 0 到 4。 subscribe 方法將觀察者附加到 observable。 next 方法用於從 observable 發(fā)出值。 complete 方法表示流的結(jié)束。

使用操作員

在這裡，我們建立一個(gè)可觀察的 first5SpacedNumbers$ 每秒發(fā)出一個(gè)值。 take 運(yùn)算子用於將流限制為前五個(gè)發(fā)射。

為什麼要使用 RxJS？

RxJS 在多種場(chǎng)景中表現(xiàn)出色：

• 處理複雜的非同步操作：RxJS 提供了一種結(jié)構(gòu)化方法來(lái)管理複雜的非同步流程，防止回調(diào)地獄和深度嵌套的 Promise。它的聲明性使您能夠簡(jiǎn)潔地表達(dá)複雜的邏輯，使您的程式碼更具可讀性和可維護(hù)性。
• 即時(shí)應(yīng)用程式：憑藉對(duì)熱門(mén)可觀察量的支持，RxJS 擅長(zhǎng)建立即時(shí)應(yīng)用程序，例如聊天應(yīng)用程式、股票行情和協(xié)作編輯工具。
• 事件處理：RxJS 簡(jiǎn)化了使用者互動(dòng)、DOM 事件和其他非同步事件的處理，提供了一種簡(jiǎn)化的方式來(lái)管理事件傳播和回應(yīng)。

RxJS 與 Promise 和 async/await

雖然 Promise 和 async/await 對(duì)於處理單一非同步操作很有價(jià)值，但 RxJS 適合管理非同步事件流。對(duì)比一下：

• Promises：使用單一值進(jìn)行解析，主要用於一次性非同步任務(wù)。
• Async/await：提供更同步的語(yǔ)法來(lái)處理 Promise，但仍專注於單一非同步操作。
• RxJS：隨著時(shí)間的推移處理多個(gè)值，提供運(yùn)算子來(lái)轉(zhuǎn)換、過(guò)濾和組合這些值。非常適合資料連續(xù)或突發(fā)到達(dá)的場(chǎng)景。

設(shè)定 RxJS

安裝

您可以使用npm或yarn在專案中安裝RxJS：

或

或者，您可以透過(guò) CDN 連結(jié)將 RxJS 包含在 HTML 檔案中。

讓我們建立一個(gè)簡(jiǎn)單的可觀察物件並訂閱它。

在此範(fàn)例中，我們使用 of 運(yùn)算子建立一個(gè)發(fā)出值 1、2 和 3 的 observable。

RxJS 中的運(yùn)算符

運(yùn)算子是 RxJS 的支柱，提供豐富的詞彙來(lái)操作資料流。以下是一些運(yùn)算符類別：

• 建立運(yùn)算子：從各種來(lái)源建立可觀察量，例如of、from、interval 和fromEvent。
• 轉(zhuǎn)換運(yùn)算子：修改發(fā)出的值，例如map、flatMap、switchMap和scan。
• 過(guò)濾運(yùn)算子：根據(jù)條件選擇性地發(fā)出值，例如filter、distinctUntilChanged和take.
• 組合運(yùn)算子：合併或組合多個(gè)可觀察量，例如merge、concat、zip和combineLatestzip
和

combineLatest

zip

和

combineLatest

zip和combineLatestzip和combineLatestzip和combineLatest。 現(xiàn)實(shí)世界的用例 讓我們來(lái)探索一些關(guān)鍵運(yùn)算子的實(shí)際範(fàn)例：

• map：轉(zhuǎn)換可觀察物件發(fā)出的值。例如，您可以使用 map 從 HTTP 回應(yīng)中提取特定資料。

• filter：僅發(fā)出符合特定條件的值。例如，您可以過(guò)濾事件流以僅處理特定區(qū)域內(nèi)的滑鼠點(diǎn)擊。

• merge：將多個(gè)可觀察量合併到一個(gè)流中，在所有來(lái)源到達(dá)時(shí)發(fā)出值。這對(duì)於處理來(lái)自不同來(lái)源的事件非常有用，例如使用者輸入和伺服器回應(yīng)。

• switchMap：當(dāng)來(lái)源 observable 發(fā)出一個(gè)值時(shí)，它會(huì)訂閱一個(gè)新的內(nèi)部 observable 並取消先前的內(nèi)部 observable。這對(duì)於用戶輸入觸發(fā)的 API 呼叫等場(chǎng)景很有用，在這種情況下您只關(guān)心最新的請(qǐng)求。

• catchError：在可觀察流中優(yōu)雅地處理錯(cuò)誤。它允許您捕獲錯(cuò)誤、執(zhí)行日誌記錄或重試等操作，並可選擇返回新的可觀察值以繼續(xù)流。

RxJS 中的錯(cuò)誤處理

RxJS 提供了強(qiáng)大的機(jī)制來(lái)管理可觀察流中的錯(cuò)誤。

• retry：如果一個(gè) observable 發(fā)出錯(cuò)誤，retry 運(yùn)算子會(huì)重新訂閱來(lái)源 observable，嘗試從錯(cuò)誤中復(fù)原。您可以指定重試次數(shù)或根據(jù)錯(cuò)誤類型套用重試邏輯。
• catchError：如前所述，catchError 運(yùn)算子可讓您優(yōu)雅地處理錯(cuò)誤、記錄錯(cuò)誤、用預(yù)設(shè)值取代錯(cuò)誤，甚至傳回一個(gè)新的可觀察值以繼續(xù)流。
• finalize：無(wú)論可觀察物件是否成功完成或發(fā)出錯(cuò)誤，運(yùn)算子都會(huì)執(zhí)行回呼函數(shù)。它對(duì)於清理任務(wù)非常有用，例如關(guān)閉資源或重置狀態(tài)。

RxJS 中的錯(cuò)誤處理請(qǐng)參考以下程式碼範(fàn)例。

在此範(fàn)例中，如果發(fā)生錯(cuò)誤，可觀察物件會(huì)嘗試重試兩次。如果所有重試都失敗，則 catchError 運(yùn)算子將處理錯(cuò)誤。 finalize 運(yùn)算子在 observable 完成或出錯(cuò)時(shí)記錄一則訊息。

實(shí)際應(yīng)用

讓我們看看RxJS如何應(yīng)用在現(xiàn)實(shí)場(chǎng)景：

• 表單驗(yàn)證：RxJS 非常適合建立反應(yīng)式表單，其中驗(yàn)證在使用者鍵入時(shí)即時(shí)發(fā)生。您可以使用可觀察量來(lái)監(jiān)控輸入變更、套用驗(yàn)證規(guī)則並提供即時(shí)回饋。
• API 輪詢：RxJS 簡(jiǎn)化了輪詢機(jī)制的實(shí)作。您可以使用 interval 和 switchMap 等運(yùn)算符定期從 API 取得數(shù)據(jù)，優(yōu)雅地處理回應(yīng)和錯(cuò)誤。
• 即時(shí)聊天應(yīng)用程式：RxJS 非常適合建立即時(shí)聊天應(yīng)用程式。熱可觀察量可以表示訊息流，map 和 filter 等運(yùn)算子可用於處理和顯示訊息。

提示和最佳實(shí)踐

要在您的專案中有效利用 RxJS：

• 分解：將複雜的邏輯分解為更小的、可管理的可觀察量，可以使用運(yùn)算符進(jìn)行組合。
• 錯(cuò)誤處理：使用catchError和重試來(lái)優(yōu)雅地處理錯(cuò)誤並增強(qiáng)應(yīng)用程式的彈性。
• 取消訂閱：透過(guò)在不再需要時(shí)取消訂閱可觀察物件來(lái)防止記憶體洩漏?？紤]使用 Angular 中的 takeUntil 或 async 管道等工具來(lái)簡(jiǎn)化訂閱管理。
• 測(cè)試：利用 RxJS 測(cè)試實(shí)用程序，例如 TestScheduler，徹底測(cè)試您的可觀察邏輯。

常見(jiàn)陷阱

• 過(guò)度使用 RxJS：RxJS 雖然功能強(qiáng)大，但如果使用不當(dāng)會(huì)增加複雜性。堅(jiān)持使用其優(yōu)勢(shì)真正有益的場(chǎng)景。
• 記憶體洩漏：忽略取消訂閱可觀察物件可能會(huì)導(dǎo)致記憶體洩漏。始終確保適當(dāng)?shù)挠嗛喒芾怼?

結(jié)論

感謝您閱讀部落格！ RxJS 提供了一種強(qiáng)大且優(yōu)雅的方式來(lái)處理 JavaScript 應(yīng)用程式中的非同步資料流。其反應(yīng)式程式設(shè)計(jì)模型與豐富的運(yùn)算子相結(jié)合，使開(kāi)發(fā)人員能夠建立響應(yīng)靈敏、可擴(kuò)展且可維護(hù)的應(yīng)用程式。透過(guò)接受可觀察量、觀察者和運(yùn)算符的概念，您可以釋放 RxJS 的全部潛力並提高您的 JavaScript 開(kāi)發(fā)技能。它的學(xué)習(xí)曲線最初可能看起來(lái)很陡峭，但在程式碼清晰度、可維護(hù)性和效率方面的回報(bào)是非常值得的。

相關(guān)部落格

• Axios 和 Fetch API？選擇正確的 HTTP 用戶端
• TypeScript 實(shí)用程式類型：完整指南
• 單元測(cè)試的 API 模擬：開(kāi)發(fā)人員的最佳實(shí)務(wù)
• JavaScript 新增功能：ECMAScript 2024（第 15 版）

以上是使用 RxJS 掌握非同步 JavaScript的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！