What's the proper pattern to wait on an observable?

Question

I have two services: one is dependent on the other. Service A makes makes an http call to get data. Service B actually uses that data.

Service A:

@Injectable({
  providedIn: 'root'
})
export class ServiceA {
  data: MyData;

  getData(): Observable<MyData> {
    return this.http.get<Mydata>('http://some.url')
      .pipe(
        tap((data: MyData) => {console.log(`got data');})
      )
    );
  };
}

Service B:

@Injectable({
  providedIn: 'root'
})
export class ServiceB {

  obs = Observable<MyData> = new Observable<MyData>();
  processedData: string[];

  constructor(private serviceA: ServiceA) {
    this.obs = this.serviceA.getData();
    this.obs.subscribe( 
      data => {this.processedData = process(data)},
      error => { /*process error*/ },
      function() { /* maybe mark flag here? */}
      );
  }

  process(endpointData) {
     // Do some business logic to endpointData
     this.processedData = endpointData;
  }

  processedData() {
    // The first time this is called, the observable hasn't completed
  }
}

A client of Service B will call processedData(). Just curious how to elegantly wait on the observable within processData(). The non-async side of me would want to check if the finally part of the observable has been called. If so, just use this.processedData. If not... then what? I suppose I could only subscribe the one time, within processedData, and only on the first call. That still seems not so correct. Thoughts?

Answer 1

The proper way to wait for an Observable is to not wait, but instead listen.

constructor(private readonly serviceA: ServiceA) {
  this.data$ = this.serviceA.getData().pipe(
     map(data => process(data)),
     shareReplay(1)
  );

  // Immediately subscribe to execute the HTTP call
  this.data$.subscribe({
    error: error => { /* Process error */ },
  });
}

...

processedData(): Observable<MyData> {
  // Return the data "holder".
  // The result will already be there, or in the process of being retrieved
  return this.data$;
}

Using the pipable operator shareReplay means the Observable acts as a cache, returning the latest calculated value on every following subscription.

serviceB.processedData().subscribe({
  next: data => ...
})

The data can be immediately available, or it will require some time to be calculated.