Angular中如何等待Observable订阅完成并返回函数值？

问题描述 #

你的初始DataService代码中，首次调用getJsonFormData()时，jsonFormData$未初始化就尝试返回其Observable，导致出现undefined错误。修改后使用BehaviorSubject<FormData>(null!)初始化，虽然能运行，但组件会首次收到null值，不符合预期。

初始错误代码 #

export class DataService {
  private jsonFormData$: BehaviorSubject<FormData>;
  private jsonPath: string;

  constructor(private http: HttpClient) {}

  getJsonFormData(): Observable<FormData> {
    if (!this.jsonFormData$) {
      this.loadJsonFormData();
    }
    return this.jsonFormData$.asObservable(); // 首次调用时jsonFormData$未定义，报错
  }

  private loadJsonFormData() {
    this.http.get(this.jsonPath).subscribe((formData: any) => {
      this.jsonFormData$.next(formData);
    });
  }
}

修改后存在的问题 #

getJsonFormData(): Observable<FormData> {
  if (!this.jsonFormData$) {
    this.jsonFormData$ = new BehaviorSubject<FormData>(null!);
    this.loadJsonFormData();
  }
  return this.jsonFormData$.asObservable(); // 组件首次订阅会收到null初始值
}

解决方案 #

方案1：使用ReplaySubject替代BehaviorSubject #

ReplaySubject不会发送初始值，只会在调用next()后发送数据，同时缓存指定数量的历史值，适合这种需要等待请求完成后才返回有效数据的场景。

修改Service代码：

import { ReplaySubject } from 'rxjs';

export class DataService {
  private jsonFormData$: ReplaySubject<FormData> | null = null;
  private jsonPath: string;

  constructor(private http: HttpClient) {}

  getJsonFormData(): Observable<FormData> {
    if (!this.jsonFormData$) {
      this.jsonFormData$ = new ReplaySubject<FormData>(1); // 缓存1个最新值
      this.loadJsonFormData();
    }
    return this.jsonFormData$.asObservable();
  }

  private loadJsonFormData() {
    this.http.get<FormData>(this.jsonPath).subscribe((formData) => {
      this.jsonFormData$?.next(formData);
    });
  }
}

组件订阅时，只会收到http请求返回的有效数据，不会收到初始null。

方案2：过滤null值（适用于必须保留BehaviorSubject的场景） #

如果因业务需求必须使用BehaviorSubject，可以在订阅时通过filter操作符过滤掉null值：

组件代码修改：

import { filter } from 'rxjs/operators';

this.dataSvc.getJsonFormData()
  .pipe(filter(formData => formData !== null))
  .subscribe((formData: any) => {
    this.jsonFormData = formData;
    console.log('const', this.jsonFormData);
  });

也可以在Service的getJsonFormData()方法中提前过滤：

getJsonFormData(): Observable<FormData> {
  if (!this.jsonFormData$) {
    this.jsonFormData$ = new BehaviorSubject<FormData>(null!);
    this.loadJsonFormData();
  }
  return this.jsonFormData$.asObservable().pipe(
    filter(formData => formData !== null)
  );
}

方案3：使用shareReplay缓存请求结果（推荐） #

利用RxJS的shareReplay操作符，无需手动管理Subject，自动缓存http请求结果，后续订阅直接复用缓存，避免重复请求，也不会返回null：

import { shareReplay } from 'rxjs/operators';

export class DataService {
  private jsonPath: string;
  private jsonFormData$: Observable<FormData> | null = null;

  constructor(private http: HttpClient) {}

  getJsonFormData(): Observable<FormData> {
    if (!this.jsonFormData$) {
      this.jsonFormData$ = this.http.get<FormData>(this.jsonPath).pipe(
        shareReplay(1) // 缓存1个请求结果
      );
    }
    return this.jsonFormData$;
  }
}

这种方式更符合RxJS的最佳实践，代码简洁且无需手动处理Subject的next()逻辑。

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