Observable获取旧数据：多次订阅导致重复接收数据问题

问题分析 #

你遇到的问题是每次调用createUserAndSession()时，都会新增一个对session$的订阅，但之前的订阅从未被取消。由于BehaviorSubject会向所有活跃订阅者推送新值，随着调用次数增加，活跃订阅数也会累积，最终导致每次创建会话时，控制台打印的次数等于调用次数。

解决方案 #

下面提供几种可行的解决方式，根据你的使用场景选择：

1. 手动管理订阅，及时取消旧订阅 #

在组件中维护一个订阅对象，每次新订阅前先取消旧订阅，同时在组件销毁时清理订阅，避免内存泄漏：

import { Subscription } from 'rxjs';
import { Component, OnDestroy } from '@angular/core';

// 组件类实现OnDestroy接口
export class YourComponent implements OnDestroy {
  private sessionSubscription?: Subscription;

  public createUserAndSession(): void {
    // 先取消之前的订阅
    this.sessionSubscription?.unsubscribe();
    
    this.sessionService.createSession(this.form);

    // 保存新的订阅对象
    this.sessionSubscription = this.sessionService.session$.subscribe((data) => {
      console.log(data);
    });
  }

  // 组件销毁时清理订阅
  ngOnDestroy(): void {
    this.sessionSubscription?.unsubscribe();
  }
}

2. 使用Angular Async管道自动管理订阅 #

利用Angular的async管道，它会自动处理订阅的创建与销毁，无需手动管理：

首先在组件中直接暴露服务的session$：

export class YourComponent {
  // 直接复用服务的Observable
  public session$ = this.sessionService.session$;

  public createUserAndSession(): void {
    this.sessionService.createSession(this.form);
  }
}

然后在模板中使用async管道（如果需要在组件类中处理数据，也可以结合tap操作符）：

<!-- 模板中使用async管道获取最新值 -->
<div *ngIf="session$ | async as currentSession">
  当前会话名称：{{ currentSession.name }}
</div>

如果需要在组件类中处理数据，也可以在初始化时订阅一次，并使用takeUntil等操作符配合组件销毁信号：

import { Subject, takeUntil } from 'rxjs';

export class YourComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    // 仅订阅一次，组件销毁时自动取消
    this.sessionService.session$
      .pipe(takeUntil(this.destroy$))
      .subscribe((data) => {
        console.log(data);
      });
  }

  public createUserAndSession(): void {
    this.sessionService.createSession(this.form);
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

3. 初始化时仅订阅一次 #

如果业务逻辑允许，在组件初始化阶段完成订阅，而不是每次调用createUserAndSession时重复订阅：

export class YourComponent implements OnInit {
  ngOnInit(): void {
    // 初始化时订阅一次，后续所有会话更新都会触发这个回调
    this.sessionService.session$.subscribe((data) => {
      console.log(data);
    });
  }

  public createUserAndSession(): void {
    this.sessionService.createSession(this.form);
  }
}

核心原因总结 #

问题本质是重复订阅未清理：每次调用createUserAndSession都会新增一个订阅，旧订阅因未被取消仍处于活跃状态，BehaviorSubject推送新值时所有活跃订阅都会响应，导致打印次数随调用次数递增。

内容的提问来源于stack exchange，提问作者Peter Boomsma