Angular 14组件因BehaviorSubject重复发起GET API请求问题排查

首先纠正代码中的明显笔误：
在SharedService的setType方法中，你调用next时使用了未定义的libraryType，应该改为传入的参数type：

setType(type: string) {
  this.type$.next(type);
}

核心解决方案：使用distinctUntilChanged操作符 #

你的问题确实和BehaviorSubject的特性相关——它会在订阅时立即推送当前最新值，若同一个值被多次推送（比如组件初始化时的默认值、后续重复设置相同值），就会触发重复API请求。通过在流中添加distinctUntilChanged()，可以确保只有当type真正发生变化时，才会触发下游的API调用。

修改SomeOtherComponent的订阅逻辑：

import { distinctUntilChanged } from 'rxjs/operators';

// ...

ngOnInit() {
  this.subscriptionList.add(
    this.sharedService.getType().pipe(
      distinctUntilChanged(), // 新增：仅当type值变化时继续流转
      switchMap(selectedType => {
        return this.someService.getStuff(selectedType)
      })
    ).subscribe(value => {
       console.log(value)
     })
  );
}

额外检查项 #

• 确保SharedService是单例
  当前你的SharedService未指定providedIn: 'root'，请确认它在根模块（如AppModule）的providers数组中声明，或者修改装饰器为：

  @Injectable({ providedIn: 'root' })
  export class SharedService {
    // ...
  }
  

  多个Service实例会导致状态不共享，进而引发重复请求。

• 排查组件重复实例化问题
  如果SomeOtherComponent通过*ngIf、路由复用等方式被多次创建/销毁，每次初始化都会触发订阅并接收BehaviorSubject的当前值。若这是预期行为，distinctUntilChanged()依然能避免相同type下的重复API请求；若非预期，则需要调整组件的渲染逻辑。

• 补全初始值设置逻辑
  若需要顶层组件初始化时覆盖BehaviorSubject的默认值，请在TopLevelComponent的ngOnInit中添加：

  ngOnInit() {
    this.sharedService.setType(this.initialValue);
  }
  

  结合distinctUntilChanged()，即使默认值和初始值相同，也不会触发重复请求。

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