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

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

什麼是 RxJS？

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

核心理念

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

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

冷觀測值與熱觀測值

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

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

讓我們用簡單的例子來說明這些概念。

創(chuàng)建一個可觀察對象

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

使用操作員

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

為什麼要使用 RxJS？

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

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

RxJS 與 Promise 和 async/await

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

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

設(shè)定 RxJS

安裝

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

或

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

讓我們建立一個簡單的可觀察物件並訂閱它。

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

RxJS 中的運算符

運算子是 RxJS 的支柱，提供豐富的詞彙來操作資料流。以下是一些運算符類別：

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

combineLatest

zip

和

combineLatest

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

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

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

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

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

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

RxJS 中的錯誤處理

RxJS 提供了強大的機制來管理可觀察流中的錯誤。

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

RxJS 中的錯誤處理請參考以下程式碼範例。

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

實際應(yīng)用

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

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

提示和最佳實踐

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

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

常見陷阱

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

結(jié)論

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

相關(guān)部落格

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

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