Rx.js响应式编程初探

什么是rx.js?

RxJS 是一个 JavaScript 库，其目的是帮助你实现响应式编程。响应式编程是一种软件编程范式，其目的是让程序在数据源发生变化时自动更新视图。RxJS 提供了一种强大的方法来处理异步数据流，并且可以让你更好地处理复杂的数据绑定。
在 RxJS 中，你可以使用可观察对象来实现响应式编程。可观察对象是一种特殊类型的对象，其可以发出一系列的值。你可以订阅可观察对象，以便在可观察对象发出新值时收到通知。

举个栗子？

下面是一个使用 RxJS 创建可观察对象的例子：

import { of } from "rxjs";

const observable = of(1, 2, 3);

我们使用了 of 函数来创建一个可观察对象，并传入了一些数字作为参数。这个可观察对象会发出三个值：1、2 和 3。

接下来，我们可以订阅这个可观察对象，以便在可观察对象发出新值时收到通知。

observable.subscribe((value) => console.log(value));

我们使用了可观察对象的 subscribe 方法来订阅它。我们传入了一个回调函数，该函数会在可观察对象发出新值时被调用。在这个例子中，我们将每个值输出到控制台。

除了 of 函数之外，RxJS 还提供了许多其他的创建可观察对象的函数。例如，你可以使用 from 函数将数组转换为可观察对象，或者使用 interval 函数创建一个发出按指定间隔发出数字的可观察对象。

除了创建可观察对象之外，RxJS 还提供了许多其他的操作符，可以用来处理可观察对象。例如，你可以使用 map 操作符将可观察对象中的每个值映射到另一个值，或者使用 filter 操作符过滤可观察对象中的某些值。

这是一个使用 RxJS 操作符的例子

import { interval } from "rxjs";
import { map, filter } from "rxjs/operators";

const observable = interval(1000).pipe(
  map((value) => value * 2),
  filter((value) => value % 3 === 0)
);

observable.subscribe((value) => console.log(value));

在这个例子中，我们使用了 interval 函数创建了一个可观察对象，该可观察对象每秒发出一个数字。 然后，我们使用了 map 和 filter 操作符来处理可观察对象。map 操作符会将可观察对象中的每个值映射为另一个值，而 filter 操作符则会过滤掉可观察对象中不符合条件的值。

在这个例子中，我们将可观察对象中的每个值乘以 2，并过滤掉不能被 3 整除的值。最后，我们订阅可观察对象，并将每个值输出到控制台。

下面是一个使用 RxJS 的复杂例子：

import { of, from, interval, fromEvent } from "rxjs";
import { map, filter, switchMap, debounceTime, distinctUntilChanged } from "rxjs/operators";

const input = document.getElementById("input");

const inputObservable = fromEvent(input, "keyup").pipe(
  map((event) => event.target.value),
  debounceTime(1000),
  distinctUntilChanged()
);

const dataObservable = inputObservable.pipe(
  switchMap((value) =>
    from(fetch(`https://api.github.com/search/repositories?q=${value}`)).pipe(
      map((response) => response.json())
    )
  )
);

dataObservable.subscribe((value) => {
  console.log(value);
});

在这个例子中，我们使用了 fromEvent 函数来从输入框的 keyup 事件中创建可观察对象。然后，我们使用了 map、debounceTime 和 distinctUntilChanged 操作符来处理这个可观察对象。

其中，map 操作符用于将事件对象映射为输入框的值，debounceTime 操作符用于延迟发出值的时间，distinctUntilChanged 操作符则用于过滤掉相同的值。

然后，我们使用了 switchMap 操作符来创建另一个可观察对象，该可观察对象会发出一个 HTTP 请求，并将响应转换为 JSON。

最后，我们订阅了这个可观察对象，并将响应数据输出到控制台。

这个例子展示了 RxJS 的强大功能，可以帮助你处理复杂的响应式编程场景。

总之，RxJS 是一个强大的库，可以帮助你实现响应式编程。它提供了许多用于创建和处理可观察对象的函数和操作符，可以让你更方便地处理异步数据流。