返回Observable的方法为何被调用两次？附代码示例

首先咱们明确：方法被调用两次，意味着有两处不同的触发点（或同一触发点被执行两次）调用了getClassesAndSubjects。结合你给出的代码片段，我整理几个最常见的排查方向：

1. 组件生命周期钩子重复调用 #

检查你的组件代码，是不是在多个生命周期钩子中都调用了这个方法：

• 比如同时在ngOnInit和ngAfterViewInit里执行了getClassesAndSubjects
• 或者在ngOnChanges里没做变更判断，每次属性变化就触发调用，而属性被意外修改了两次

2. 模板中的重复触发 #

如果是在模板里直接绑定了方法调用（比如*ngIf="getClassesAndSubjects(...) | async"或(click)="getClassesAndSubjects(...)"）：

• Angular的变更检测机制会在每次检测时执行模板里的方法，要是没做结果缓存，很容易触发多次调用
• 另外，如果模板里有多个地方调用了这个方法，自然会触发多次执行

3. 事件绑定或状态变化的重复触发 #

比如：

• 组件的某个事件（如(input)、(change)）绑定了该方法，而用户操作不小心触发了两次这个事件
• 状态管理工具（如NgRx、Signal）的订阅回调里调用了这个方法，而状态被更新了两次

4. 业务逻辑中的重复调用 #

检查你的代码逻辑：

• 是不是在某个条件分支里，两个不同分支都调用了这个方法
• 或者在循环、递归逻辑里不小心触发了多次调用

快速排查小技巧 #

你可以在getClassesAndSubjects方法里打印调用栈，直接定位每次调用的源头：

public getClassesAndSubjects(school: number, whenDate: string): Observable<ClassesAndSubjects[]> { 
  console.log('方法被调用，调用栈：', new Error().stack); // 新增这行
  console.log('1'); 
  const observable = this.classService.GetClassesAndSubjects(school, whenDate); 
  console.log("2"); 
  observable.subscribe(data => { 
    if (!data.hasOwnProperty('errors')) { 
      this.classesSubjects = data; 
    } 
  }, error => { 
    console.log("ERROR loading GetClassesAndSubjects: " + error); 
  }); 
  return observable; // 假设你这里有返回，否则方法返回值不符合定义
}

另外，你的代码还有个潜在问题：方法返回Observable的同时，内部又手动订阅了一次。如果外部调用方也订阅这个Observable，this.classService.GetClassesAndSubjects的HTTP请求会被执行两次（冷Observable的特性）。推荐用tap和shareReplay优化，既保留存数据的逻辑，又避免重复请求：

public getClassesAndSubjects(school: number, whenDate: string): Observable<ClassesAndSubjects[]> { 
  console.log('1'); 
  return this.classService.GetClassesAndSubjects(school, whenDate).pipe(
    tap(data => {
      if (!data.hasOwnProperty('errors')) { 
        this.classesSubjects = data; 
      }
    }),
    catchError(error => {
      console.log("ERROR loading GetClassesAndSubjects: " + error);
      return throwError(() => error); // 重新抛出错误让外部处理
    }),
    shareReplay(1) // 共享订阅，避免多次请求
  );
}

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