RxJS 快速入门教程-JavaScript中文网-JavaScript教程资源分享门户

RxJS（Reactive Extensions for JavaScript）是一个基于观察者模式和迭代器模式的响应式编程库，为开发人员提供了更简单、更易于组合和处理异步数据流的方式。本文旨在为前端开发人员提供 RxJS 的快速入门教程，让大家能够掌握 RxJS 的基本思想和用法。

RxJS 的基本思想

RxJS 基于观察者模式，将数据流看作是一个可观察的事件流。当源数据发生变化时，这个事件流就会发出一个新的事件，响应式编程就是在处理这些事件的过程中产生副作用。

RxJS 还基于迭代器模式，将操作链看作是一系列消息。使用 RxJS 可以轻松地处理流式数据，比如处理鼠标移动事件、定时器事件、HTTP 请求等。

RxJS 的基本概念

在使用 RxJS 进行响应式编程时，有三个核心概念需要掌握：Observable（可观察对象）、Observer（观察者）和 Operators（操作符）。

Observable

Observable 是一个能够发出一系列事件的对象，它是 RxJS 基于观察者模式的实现。Observable 可以发出三种类型的事件：Next（下一步）、Error（错误）和 Complete（完成）。

import { of } from 'rxjs';

const observable = of('hello', 'world');
observable.subscribe(console.log); // 输出 'hello'，'world'

上面的代码定义了一个 Observable，它发出了两个 Next 事件，分别包含 'hello' 和 'world' 字符串。通过 subscribe 方法，我们可以订阅这个 Observable 并接收它发出的事件。

Observer

Observer 是一个能够处理 Observable 发出的事件的对象，它是 RxJS 基于观察者模式的实现。Observer 可以处理三种类型的事件：Next、Error 和 Complete。

const observer = {
  next: value => console.log(value),
  error: error => console.log(error),
  complete: () => console.log('complete')
};

observable.subscribe(observer); // 输出 'hello'，'world'

上面的代码定义了一个 Observer，它通过 next 方法处理 Observable 发出的 Next 事件，并通过 error、complete 方法处理 Observable 发出的 Error 和 Complete 事件。通过 subscribe 方法，我们可以订阅这个 Observable 并将这个 Observer 传递给它。

Operators

Operators 是一些用于操作 Observable 的函数，它可以将一个 Observable 转换成另一个 Observable，或者对一个 Observable 的事件流进行过滤、转换等操作。RxJS 提供了大量的常用操作符，比如 map、filter、take、merge、concat 等等。

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const observable = of(1, 2, 3);
observable.pipe(
  map(value => value * 2)
).subscribe(console.log); // 输出 2，4，6

上面的代码使用了 map 操作符，将 Observable 发出的值乘以 2 并产生一个新的 Observable。通过 pipe 方法，我们可以将一个 Observable 转换成另一个 Observable，并按顺序应用一组操作符。

RxJS 的示例代码

下面是一个使用 RxJS 实现的简单的搜索建议功能。用户在搜索框中输入一个关键字，应用程序就会向服务器发送一个 HTTP 请求获取搜索建议列表。将搜索建议列表显示在下拉框中，当用户在搜索框中继续输入时，应用程序会根据当前关键字再次发送 HTTP 请求获取更新后的搜索建议列表。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>RxJS 示例代码</title>
</head>
<body>
  <input type="text" id="search-box">
  <div id="suggest-box"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/rxjs/6.6.7/rxjs.umd.min.js"></script>
  <script>
    const searchBox = document.getElementById('search-box');
    const suggestBox = document.getElementById('suggest-box');

    const searchSuggest$ = Rx.Observable.fromEvent(searchBox, 'input')
        .map(event => event.target.value)
        .filter(keyword => keyword.length >= 3)
        .debounceTime(300)
        .distinctUntilChanged()
        .switchMap(keyword =>
            Rx.Observable.ajax({
              url: `/search?q=${keyword}`,
              method: 'GET',
              responseType: 'json',
            })
        )
        .pluck('response', 'suggestions')
        .catch(error => Rx.Observable.of([]))
        .share();

    searchSuggest$.subscribe(
        suggestions => {
          const suggestList = suggestions.map(suggestion => `<li>${suggestion}</li>`).join('');
          suggestBox.innerHTML = `<ul>${suggestList}</ul>`;
        }
    );
  </script>
</body>
</html>

上面的代码定义了一个 searchSuggest$ 可观察对象，它使用了几个常用的操作符：

fromEvent：将搜索框的输入事件转换成一个 Observable。
map：将输入事件映射成搜索框的值。
filter：过滤出合法的搜索关键字。
debounceTime：等待用户停止输入 300 毫秒才发送 HTTP 请求。
distinctUntilChanged：去除连续相同的搜索关键字。
switchMap：将搜索关键字映射成一个 HTTP 请求 Observable 并切换到这个 Observable。
pluck：提取 HTTP 响应中的搜索建议列表。
catch：捕获 HTTP 请求错误并转换成空数组。
share：共享搜索建议列表 Observable，以避免重复发送 HTTP 请求。

searchSuggest$ 可观察对象在完成订阅后，会将搜索建议列表显示在下拉框中。

RxJS 的学习与指导意义

RxJS 的快速入门教程结束了，如果你已经掌握了 RxJS 的基本思想和用法，那么你已经迈出了响应式编程的第一步。RxJS 提供了一种功能强大、响应速度快、维护成本低的方式来处理异步数据流，它在 Web 应用程序开发中得到了广泛的应用。如果你还没有尝试过 RxJS，不妨拿起本文提供的示例代码练习一下，相信你会受益匪浅。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7fea8a941bf7134e44c91

RxJS 快速入门教程