如何等待订阅完成并从函数返回值？

Question

我有以下服务

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();
  }

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

我从一个组件中调用它，如下所示

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

但是，它始终未定义为可从服务中观察到

return this.jsonFormData$.asObservable();

我希望如何加载可观察值然后返回值。

Answer 1

首先初始化你的BehaviorSubject，然后检查它是否没有值，然后调用api。

对于前任。

export class DataService {
  private jsonFormData$: BehaviorSubject<FormData> = new BehaviorSubject(null);
  private jsonPath: string;

  constructor(private http: HttpClient) {}

  getJsonFormData(): Observable<FormData> {
    if (!this.jsonFormData$.getValue()) {
      this.loadJsonFormData();
    }
    return this.jsonFormData$.asObservable();
  }

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