如何在TypeScript Observer中等待数据加载完成？

看起来你是在处理异步数据返回的问题对吧？你的getClassesAndSubjects方法通过Observable从服务器拉取数据，成功后填充this.classesSubjects，但如果你的getClasses方法直接返回这个变量，大概率会拿到空值或者初始值——因为HTTP请求是异步的，数据还没加载完呢！

给你两个实用的解决方案：

这是Angular里处理异步数据最常用的方式，我们可以用BehaviorSubject来保存数据状态，让getClasses返回一个Observable，这样调用方总能拿到最新的数据：

// 先在类里定义一个BehaviorSubject，用来保存数据的实时状态
private classesSubjects$ = new BehaviorSubject<any>(null);

public getClassesAndSubjects(school: number, whenDate: string) {
  this.classService.GetClassesAndSubjects(school, whenDate).subscribe(data => {
    if (!data.hasOwnProperty('errors')) {
      this.classesSubjects = data; // 保留原有的同步变量（可选）
      this.classesSubjects$.next(data); // 更新Subject的值，推送给订阅者
    }
  }, error => {
    console.log("ERROR loading GetClassesAndSubjects: " + error);
    this.classesSubjects$.next(null); // 错误时也更新状态，避免订阅者一直等待
  });
}

public getClasses(): Observable<any> {
  // 返回一个只读的Observable，防止外部直接修改状态
  return this.classesSubjects$.asObservable();
}

调用的时候就这么用：

// 假设这是你的组件实例
this.yourService.getClasses().subscribe(data => {
  if (data) {
    // 这里就能拿到最新的班级和科目数据啦
    console.log('数据已加载:', data);
  }
});

如果你更习惯Promise的写法，也可以把Observable转换成Promise，让getClasses返回一个Promise，确保数据加载完成后再拿到结果：

public getClassesAndSubjects(school: number, whenDate: string): Promise<any> {
  return this.classService.GetClassesAndSubjects(school, whenDate).toPromise()
    .then(data => {
      if (!data.hasOwnProperty('errors')) {
        this.classesSubjects = data;
        return data;
      }
      return null;
    })
    .catch(error => {
      console.log("ERROR loading GetClassesAndSubjects: " + error);
      throw error; // 把错误抛出去，让调用方可以处理
    });
}

// 如果需要返回当前已加载的数据，或者等待加载完成
public async getClasses(): Promise<any> {
  // 这里可以根据业务逻辑调整：如果数据还没加载，就先触发请求
  // if (!this.classesSubjects) {
  //   await this.getClassesAndSubjects(123, '2024-05-20'); // 替换成你的参数
  // }
  return this.classesSubjects;
}

小提醒 #

• 异步操作的核心是不要指望立即拿到结果，直接返回this.classesSubjects肯定会踩坑，因为请求还在后台跑的时候，这个变量还是初始值。
• BehaviorSubject的好处是，哪怕你是在请求完成后才订阅，也能立即拿到最新的数据，非常适合在组件间共享状态。
• 别忘了处理错误情况，不然请求失败的时候，调用方可能会一直处于等待状态哦！

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