Angular中如何结合高阶Observable使用forkJoin并保留HTTP取消功能

我在Angular项目的TodoComponent组件中，通过BehaviorSubject管理请求Observable，利用switchMap订阅获取todos和users数据，需要在两个请求都完成后调用processTodos()方法，但遇到了以下问题：

• 直接对BehaviorSubject使用forkJoin：因为BehaviorSubject不会完成，订阅回调永远不触发
• 请求完成后调用BehaviorSubject的complete()：能触发forkJoin回调，但只能生效一次
• 用combineLatest替代forkJoin：processTodos()会被触发两次
• 直接对HTTP Observable用forkJoin：双重订阅导致请求重复发送

可行解决方案 #

方案1：在switchMap内部用forkJoin组合请求 #

这种方式既保留switchMap的请求取消能力（当BehaviorSubject发出新值时，自动取消之前未完成的请求），又能确保仅在两个请求都完成后触发目标方法，且不会出现重复请求。

示例代码：

// 用于触发请求的BehaviorSubject
private refreshTrigger = new BehaviorSubject<void>(undefined);

ngOnInit() {
  this.refreshTrigger.pipe(
    switchMap(() => {
      // 内部用forkJoin组合两个HTTP请求，确保单次订阅
      return forkJoin([
        this.todoService.getTodos(),
        this.userService.getUsers()
      ]);
    })
  ).subscribe(([todos, users]) => {
    // 双请求完成后执行
    this.processTodos(todos, users);
  });
}

// 触发请求刷新的方法（比如按钮点击调用）
refreshData() {
  this.refreshTrigger.next();
}

方案2：结合tap、filter和take处理单请求中间逻辑 #

如果需要在单个请求完成时执行额外操作，同时等待双请求完成后调用processTodos()，可以通过状态标记+过滤实现：

示例代码：

private todosLoaded = false;
private usersLoaded = false;
private todos: Todo[];
private users: User[];

private refreshTrigger = new BehaviorSubject<void>(undefined);

ngOnInit() {
  this.refreshTrigger.pipe(
    switchMap(() => {
      // 每次触发刷新时重置状态
      this.todosLoaded = false;
      this.usersLoaded = false;

      return combineLatest([
        this.todoService.getTodos().pipe(
          tap(todos => {
            this.todos = todos;
            this.todosLoaded = true;
            // 这里可添加单个请求完成后的逻辑
          })
        ),
        this.userService.getUsers().pipe(
          tap(users => {
            this.users = users;
            this.usersLoaded = true;
            // 这里可添加单个请求完成后的逻辑
          })
        )
      ]).pipe(
        // 仅当两个请求都完成时才发出值
        filter(() => this.todosLoaded && this.usersLoaded),
        // 只取一次结果，避免重复触发
        take(1)
      );
    })
  ).subscribe(() => {
    this.processTodos(this.todos, this.users);
  });
}

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