RxJS 是一款强大的响应式编程库，它提供了一套完整的 API，使得开发者可以轻松地利用响应式编程的思想来处理异步数据流。在 RxJS 中，订阅与取消订阅是非常重要的概念，本文将详细介绍 RxJS 的订阅与取消订阅原理。
订阅与取消订阅的基本概念
在 RxJS 中，我们可以通过 Observable 对象来表示一个数据流，当我们想要监听这个数据流时，就需要对这个 Observable 对象进行订阅。订阅是一个异步操作，它会返回一个 Subscription 对象，这个对象可以用来取消订阅。
// www.javascriptcn.com code example
import { Observable } from 'rxjs';
const observable = new Observable(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
});
const subscription = observable.subscribe(value => {
console.log(value);
});
// 输出：
// 1
// 2
// 3在上面的代码中，我们创建了一个 Observable 对象，并对它进行了订阅。当我们订阅这个 Observable 对象时，它会立即开始执行，并将数据流中的每个值依次推送给我们的观察者函数。在这个例子中，我们只是简单地将每个值打印到控制台上。
订阅是一个持续的操作，它会一直监听数据流中的值，直到我们手动取消订阅。取消订阅可以通过调用 Subscription 对象的 unsubscribe() 方法来实现。
subscription.unsubscribe();
在上面的代码中，我们调用了 subscription.unsubscribe() 方法来取消订阅，这样我们就不再接收数据流中的任何值。
订阅与取消订阅的实现原理
RxJS 中的订阅与取消订阅是怎么实现的呢？其实它们的实现原理非常简单。当我们调用 Observable.subscribe() 方法时，它会返回一个 Subscription 对象，同时它会将我们的观察者函数保存到一个内部数组中。当数据流中有新的值时，它会遍历这个数组，依次调用每个观察者函数，并将新的值传递给它们。
当我们调用 Subscription.unsubscribe() 方法时，它会将我们的观察者函数从内部数组中删除，这样数据流中的值就不再被推送给我们的观察者函数了。
订阅与取消订阅的注意事项
在使用 RxJS 进行订阅与取消订阅时，需要注意以下几点：
- 订阅是一个异步操作，它不会阻塞当前线程。
- 订阅可以被多次调用，每次调用都会返回一个新的
Subscription对象。 - 取消订阅是一个同步操作，它会立即停止数据流中的值推送，并释放资源。
- 取消订阅后，再次订阅同一个
Observable对象时，它会重新开始执行，并将数据流中的每个值重新推送给观察者函数。
示例代码
下面是一个完整的示例代码，它演示了如何使用 RxJS 进行订阅与取消订阅，并包含了一些注意事项。
// www.javascriptcn.com code example
import { Observable } from 'rxjs';
const observable = new Observable(observer => {
console.log('Observable started');
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
const subscription1 = observable.subscribe({
next: value => {
console.log(`Subscription1 received: ${value}`);
},
complete: () => {
console.log('Subscription1 completed');
}
});
const subscription2 = observable.subscribe({
next: value => {
console.log(`Subscription2 received: ${value}`);
},
complete: () => {
console.log('Subscription2 completed');
}
});
subscription1.unsubscribe();
console.log('Program ended');在上面的代码中，我们创建了一个 Observable 对象，并对它进行了两次订阅。在第一次订阅时，我们打印了一条消息，表示 Observable 对象已经开始执行。在第二次订阅时，我们没有打印任何消息。
接着，我们取消了第一次订阅，并打印了一条消息，表示程序已经结束。在程序结束后，第二次订阅仍然在继续执行，直到 Observable 对象完成。
下面是这段代码的输出结果：
// www.javascriptcn.com code example Observable started Subscription1 received: 1 Subscription1 received: 2 Program ended Subscription2 received: 1 Subscription2 received: 2 Subscription2 received: 3 Subscription1 completed Subscription2 completed
从输出结果可以看出，第一次订阅在取消后立即停止了执行，而第二次订阅仍然在继续执行。当 Observable 对象完成时，第二次订阅也随之完成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d568baa941bf7134a151b0