如何在RxJS中无需takeUntil实现第二次订阅前取消前一次订阅？

核心思路是维护上一次的订阅实例，每次调用订阅函数时先取消前一次的订阅，再创建新订阅，从根源上避免多个订阅同时存在导致的副作用。

代码实现 #

import { Subject, Subscription } from 'rxjs';

const test$ = new Subject();
let previousSubscription: Subscription | null = null;

function someFunctionSub(n: number) {
  // 先取消前一次订阅（如果存在）
  if (previousSubscription) {
    previousSubscription.unsubscribe();
    previousSubscription = null;
  }
  // 创建新订阅并保存实例
  previousSubscription = test$.subscribe((res) => console.log(n));
}

// 第一次订阅
someFunctionSub(1);
test$.next(true); // 输出：1

// 1秒后第二次订阅
setTimeout(() => {
  someFunctionSub(2);
  test$.next(true); // 仅输出：2
}, 1000);

方案说明 #

1. 订阅实例管理：用previousSubscription变量存储上一次的订阅对象，每次调用someFunctionSub时先执行unsubscribe()终止前一次的订阅，确保同一时间只有一个订阅生效。
2. 适配无next触发场景：即使第一次订阅后从未触发test$.next()，第二次调用时前一次订阅也会被取消，后续触发next只会执行最新的订阅回调。
3. DI服务场景适配：如果是在DI服务中使用，可以把previousSubscription作为服务类的成员变量，针对不同的可观察对象维护各自的订阅实例；也可以用new Subscription()创建一个容器，通过add()方法添加多个订阅，取消时调用容器的unsubscribe()即可批量终止。

为什么之前的方案不行？ #

• takeUntil方案：需要手动触发destroy$，且每次订阅都要重新关联，不符合“无需多次调用销毁信号”的需求。
• switchMap方案：你之前的写法是每次调用都直接订阅test$，switchMap并没有起到切换订阅的作用——因为switchMap作用于内部可观察对象，而你每次都是新建一个对test$的订阅，旧订阅依然存在，所以会出现重复输出。
• take(1)方案：只能保证订阅触发一次后自动取消，但如果next从未触发，旧订阅会一直存在，第二次订阅时就会有两个订阅同时生效。

内容的提问来源于stack exchange，提问作者Kostiantyn Okhotnyk