前言
RxJS 是一个基于 JavaScript 的响应式编程库，被广泛应用在前端开发中。通过 RxJS，开发者可以使用 Observable 来处理异步数据流，将事件和异步操作进行连接和过滤。因此，掌握 RxJS 是每个前端开发者必备的技能之一。
本文将为大家详细介绍 RxJS 中 Observable 的创建和消费方式，涵盖基础和高级操作。同时，本文还包括大量示例代码，方便读者学习和理解。
基础知识
在学习 RxJS 之前，需要先了解一些基础知识。
Observable 的概念
Observable 是 RxJS 中非常重要的一个概念，它代表可观察对象。Observable 可以是一个数值、字符串、函数，甚至是一组数据或事件。我们可以通过 Observable 来监控数据或事件的变化，然后执行相应的操作。
Observer 的概念
Observer 是 Observable 的订阅者，它包含三个方法：next、error 和 complete。当 Observable 中的数据或事件发生变化时，Observer 会相应地执行相应的方法。
Subscription 的概念
Subscription 表示 Observable 和 Observer 之间的连接，它包含 unsubscribe 方法，用于取消 Observable 的订阅。
Observable 的创建和消费
创建 Observable
在 RxJS 中，有多种方式可以创建 Observable。下面将分别介绍。
使用 create 方法
create 方法是最常用的创建 Observable 的方式。它接收一个函数作为参数，这个函数表示 Observable 发出事件时的行为。
示例代码如下：创建一个 Observable，每隔 1 秒钟发出一个数字，从 0 开始，不断递增。
// javascriptcn.com 代码示例
import { Observable } from 'rxjs';
const observable = new Observable(observer => {
let count = 0;
setInterval(() => {
observer.next(count);
count++;
}, 1000);
});然后，我们可以使用 subscribe 方法订阅 Observable。
const observer = {
next: item => console.log(item),
error: err => console.error(err),
complete: () => console.info('complete'),
};
const subscription = observable.subscribe(observer);使用 of 方法
of 方法可以用来创建一个包含任意类型值的 Observable。
示例代码如下：创建一个 Observable，发出 1、2、3 三个数字。
import { of } from 'rxjs';
const observable = of(1, 2, 3);使用 from 方法
from 方法用于将数组、可迭代对象和 Promise 转化成 Observable。
示例代码如下：创建一个 Observable，从数组中发出每个项目。
import { from } from 'rxjs';
const arr = [1, 2, 3];
const observable = from(arr);消费 Observable
我们已经创建了一个 Observable，现在来看如何消费它。
使用 subscribe 方法
subscribe 方法用于订阅 Observable，并接收 Observer。
示例代码如下：从 Observable 中获取每个数据并打印。
const observer = {
next: item => console.log(item),
error: err => console.error(err),
complete: () => console.info('complete'),
};
const subscription = observable.subscribe(observer);使用 pipe 方法
Observable 中提供了一组丰富的操作符，可用于操作数据流。pipe 方法就是用来组合这些操作符的。
示例代码如下：从 Observable 中筛选出大于 2 的数字并打印。
import { filter } from 'rxjs/operators';
const subscription = observable
.pipe(filter(item => item > 2))
.subscribe(observer);取消 Observable
Observable 的订阅可以随时取消，方法是调用 Subscription 对象的 unsubscribe 方法。
示例代码如下：每次发出一个数字后等 3 秒钟再进行下一个发射。使用 unsubscribe 方法，在发出 5 个数字后停止 Observable 的发射。
// javascriptcn.com 代码示例
const observable = new Observable(observer => {
let count = 0;
const intervalId = setInterval(() => {
observer.next(count);
count++;
if (count === 5) {
clearInterval(intervalId);
observer.complete();
}
}, 1000);
return {
unsubscribe: () => clearInterval(intervalId),
};
});
const subscription = observable.subscribe(observer);
setTimeout(() => {
subscription.unsubscribe();
}, 3000);高级操作
Subject
Subject 是 RxJS 中的一个类，既是 Observable，也是 Observer。我们可以通过它来创建一种特殊的 Observable，这种 Observable 可以被多个 Observer 订阅，并且可以在运行时向它添加值和新的 Observer。
示例代码如下：创建一个 Subject，发出 1、2、3 三个数字。
import { Subject } from 'rxjs';
const subject = new Subject<number>();
subject.next(1);
subject.next(2);
subject.next(3);Subject 通常用于多个 Observer 之间的通信。
ReplaySubject
ReplaySubject 是另外一种可以被多个 Observer 订阅的 Observable。它会记录下每一次发射的数据，并将这些数据在后面的 Observer 订阅时重新推送出去。
示例代码如下：创建一个 ReplaySubject，发出 1、2、3 三个数字。
import { ReplaySubject } from 'rxjs';
const subject = new ReplaySubject<number>();
subject.next(1);
subject.next(2);
subject.next(3);BehaviorSubject
BehaviorSubject 是一种特殊的 Observable，它会记录下最近一次发射的数据，并在有新的 Observer 订阅时将这些数据推送给它们。
示例代码如下：创建一个 BehaviorSubject，记录下最后一次发出的数字，并发出第一个数字 0。
import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject<number>(0);
subject.next(1);
subject.next(2);
subject.next(3);总结
本文介绍了 RxJS 中 Observable 的创建和消费方式，涵盖了基础知识和高级操作。学习 RxJS 需要掌握的不仅仅是语法，还要理解响应式编程的思想。通过本文的介绍和示例代码的实践操作，相信读者已经对 RxJS 有了更深入的了解和掌握。
需要注意的是，RxJS 中提供的操作符很多，读者不必一一学习。对于每个操作符，我们只需要了解它的基本作用和使用方法即可，根据实际需求选择使用即可。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651dc10e95b1f8cacd5625fa