RxJS 入门教程

什么是 RxJS

RxJS 是 JavaScript 的一个函数式编程库，是一个响应式编程库，通过使用可观察对象和各种操作符来编写异步和基于事件的程序。它帮助我们管理异步数据流和时间相关问题，它支持从任何类型的数据源（例如 WebSocket、Ajax、DOM 事件、Web Worker、Node.js 等）无缝的创建和使用数据流，提供了一些强大的操作符来帮助我们解决许多通用的问题。

RxJS 的优点

1. RxJS 解决了异步编程的困难，使我们能够更容易地处理异步数据流。
2. 在处理异步代码时，RxJS 可以帮助我们写出更简单、更灵活且更少错误的代码。
3. RxJS 允许我们以响应式的方式处理数据，这意味着我们可以自动更新订阅数据的任何元素。

RxJS 的基本用法

安装 RxJS

可以从 npm 上安装最新版本的 RxJS：

npm install rxjs

创建可观测对象

在 RxJS 中，可观察对象是一个单值或者多个值的抽象。我们可以使用以下方法创建可观察对象。

of() 方法

import { of } from 'rxjs';

const source$ = of(1, 2, 3); //创建一个发出 1、2、3 的 observable
source$.subscribe(console.log); //输出 1 2 3

from() 方法

import { from } from 'rxjs';

const source$ = from([1, 2, 3]); //创建一个发出 1、2、3 的 observable
source$.subscribe(console.log); //输出 1 2 3

interval() 方法

import { interval } from 'rxjs';

const source$ = interval(1000); // 每 1 秒发出递增的整数
source$.subscribe(console.log);

range() 方法

import { range } from 'rxjs';

const source$ = range(1, 3); //创建一个发出 1、2、3 的 observable
source$.subscribe(console.log); //输出 1 2 3

操作符

RxJS 提供了许多强大的操作符，用于创建和处理数据流。

map() 方法

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

const source$ = of(1, 2, 3); //创建一个发出 1、2、3 的 observable
const mapped$ = source$.pipe(map(value => value * 2)); //对 source$ 中的每个值进行乘 2 的操作
mapped$.subscribe(console.log); //输出 2 4 6

filter() 方法

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

const source$ = of(1, 2, 3); //创建一个发出 1、2、3 的 observable
const filtered$ = source$.pipe(filter(value => value > 2)); //过滤掉小于等于 2 的值
filtered$.subscribe(console.log); //输出 3

订阅可观察对象

import { of } from 'rxjs';

const source$ = of(1, 2, 3); //创建一个发出 1、2、3 的 observable
const subscription = source$.subscribe(value => console.log(value)); //输出 1 2 3

//取消订阅
subscription.unsubscribe();

RxJS 示例

import { interval } from 'rxjs';
import { take, map } from 'rxjs/operators';

const source$ = interval(1000); // 每 1 秒发出递增的整数
const mapped$ = source$.pipe(take(5), map(value => value * 2)); //进行 5 次乘 2 的操作
mapped$.subscribe(console.log); //输出 0 2 4 6 8

总结

RxJS 是一种非常有用的响应式编程库，可以帮助我们解决异步编程中的许多问题。它灵活、强大且易于使用，它的操作符和方法可以帮助我们处理数据流。我们可以通过学习和使用 RxJS 来写出更简洁、易于维护的代码。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65406b787d4982a6eb9ea424