Angular rxjs multiple subscriptions to ajax response observable firing multiple ajax requests

Question

How can I make it so I can subscribe to the "child" observables piped from the "parent" without firing the main ajax request?

Please see full working MVP example on StackBlitz if necessary.

@Component({
  selector: 'my-app',
  template: `
    <h3>{{ title$ | async }}</h3>
    <p>{{ value$ | async }}</p>
  `,
})
export class AppComponent implements OnInit {
  public response$: Observable<Response>;
  public title$: Observable<string>;
  public value$: Observable<string>;

  constructor(private fakeAjaxService: FakeAjaxService) {}

  ngOnInit(): void {
    // call the main ajax request to populate the response$ observable
    this.response$ = this.fakeAjaxService.request();
    // pluck the title from the response
    this.title$ = this.response$.pipe(pluck('title'));
    // pluck the value from the response
    this.value$ = this.response$.pipe(pluck('value'));
  }
}

Thanks for any help!

Fan Cheung · Accepted Answer · 2021-09-08 05:01:04Z

2

You can use shareReplay() to cache the result then this.response$ will turn into a hot observable and only one request will trigger.

  ngOnInit(): void {
    this.response$ = this.fakeAjaxService.request().pipe(shareReplay());
    this.title$ = this.response$.pipe(pluck('title'));
    this.value$ = this.response$.pipe(pluck('value'));
  }

answered Sep 8, 2021 at 5:01

Fan Cheung

11.5k3 gold badges21 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular rxjs multiple subscriptions to ajax response observable firing multiple ajax requests

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related