RxJS 是一个强大的 JavaScript 库，它可以帮助我们更轻松地构建响应式应用。本文将带您从零开始学习 RxJS，并逐步构建一个响应式应用。
什么是 RxJS？
RxJS 是 ReactiveX 的 JavaScript 实现，它是一个使用可观察对象进行异步编程的库。它可以帮助我们更轻松地处理异步事件，例如用户输入、网络请求等等。
RxJS 的核心概念是可观察对象（Observable）、观察者（Observer）和操作符（Operators）。可观察对象代表一个值或事件序列，观察者负责订阅并响应这些值或事件，操作符用于处理这些值或事件。
安装 RxJS
您可以通过 npm 安装 RxJS：
npm install rxjs
创建可观察对象
我们可以使用 Observable.create() 方法来创建一个可观察对象。以下是一个简单的示例：
const { Observable } = require('rxjs');
const observable = Observable.create(observer => {
observer.next('Hello');
observer.next('World');
observer.complete();
});在上面的示例中，我们创建了一个可观察对象，它会发出两个值（'Hello' 和 'World'），然后完成。
订阅可观察对象
我们需要订阅可观察对象才能接收它发出的值或事件。我们可以使用 Observable.subscribe() 方法来订阅可观察对象。以下是一个简单的示例：
observable.subscribe({
next: value => console.log(value),
complete: () => console.log('Complete')
});在上面的示例中，我们订阅了可观察对象，并在每次它发出值时打印它们。当可观察对象完成时，我们会打印 'Complete'。
操作符
操作符是 RxJS 中的一个重要概念，它们用于处理可观察对象发出的值或事件。我们可以使用操作符来进行过滤、映射、合并等操作。
以下是一些常用的操作符：
map()：用于将可观察对象发出的每个值映射到一个新的值。filter()：用于过滤可观察对象发出的值，只保留符合条件的值。mergeMap()：用于将可观察对象发出的值映射到一个新的可观察对象，并将它们合并成一个可观察对象。scan()：用于将可观察对象发出的值累加到一个累加器中，并发出累加器的当前值。
以下是一个简单的示例，演示了如何使用 map() 操作符将可观察对象发出的每个值加倍：
observable
.pipe(
map(value => value * 2)
)
.subscribe({
next: value => console.log(value),
complete: () => console.log('Complete')
});在上面的示例中，我们使用 pipe() 方法将 map() 操作符应用到可观察对象上。当可观察对象发出值时，map() 操作符会将它们加倍，并将它们发出给观察者。
构建响应式应用
现在，我们已经了解了 RxJS 的基础知识，我们可以开始构建一个响应式应用了。
我们将创建一个简单的搜索应用，它将从 GitHub API 中搜索仓库，并将搜索结果显示在界面上。以下是我们的计划：
- 创建一个文本框，用于输入搜索关键字。
- 当用户输入搜索关键字时，我们将发出一个网络请求，并显示加载指示器。
- 当网络请求完成时，我们将显示搜索结果，并隐藏加载指示器。
以下是我们的代码：
-- -------------------- ---- -------
----- - --------- - - ----------------
----- - ---- - - ---------------------
----- - ------------- --------------------- ------- ---------- --- - - --------------------------
----- ----- - ----------------------------------
----- ------- - -----------------------------------
----- ------- - -----------------------------------
----- ------- - ---------------- --------------
------------------
--------- -- --------------------
-----------------------
------------ -- ------------------- - ---
------ -- -
--------------------- - --------
----------------- - ---
---
--------------- --
-----------------------------------------------------------------------------------------
------------ -- -------------------------
------ -- -
--------------------- - -------
--
-
-
--
-------------------
----- ----- -- -
------------------ -- -
----- -- - -----------------------------
------------ - --- ------------------------------------------
------------------------
---
-
---在上面的代码中，我们首先从 DOM 中获取搜索文本框、加载指示器和搜索结果元素。然后，我们使用 fromEvent() 方法创建一个可观察对象，它会发出每次用户输入搜索关键字时的值。
接下来，我们使用一系列操作符来处理这个可观察对象。首先，我们使用 debounceTime() 操作符来延迟发出值，以避免频繁地发送网络请求。然后，我们使用 distinctUntilChanged() 操作符来过滤掉重复值。接着，我们使用 filter() 操作符来过滤掉空白查询。最后，我们使用 tap() 操作符来显示加载指示器和清空搜索结果。
然后，我们使用 switchMap() 操作符来将查询字符串转换为一个新的可观察对象，它会向 GitHub API 发送网络请求。当网络请求完成时，我们使用 map() 操作符来提取响应中的仓库数组，并使用 tap() 操作符来隐藏加载指示器。
最后，我们订阅这个可观察对象，并在每次它发出值时更新搜索结果列表。我们使用 forEach() 方法遍历仓库数组，并为每个仓库创建一个新的列表项。
结论
在本文中，我们学习了 RxJS 的基础知识，并使用它构建了一个响应式搜索应用。RxJS 可以帮助我们更轻松地处理异步事件，例如用户输入、网络请求等等。希望本文能够帮助您更好地理解 RxJS，并在实际项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6743eea2f3dd6530329d849d