How to chain api calls using rxjs?

Published

I understand that there are lot of questions on the title’s subject but I wasn’t able to find clear and concise question/response that would help me with following.

Assume we have x amount of web api calls that return observables Observable<cs[]>…
See

  init() {
    this.service.serviceA().subscribe({
      next: (as) => {
        this.as = as;
        this.service.serviceB().subscribe({
          next: (bs) => {
            this.bs = bs;
            this.service.serviceC().subscribe({
              next: (cs) => {
                this.cs = cs;
                this.restructureABCs();
              },
              error: (e) => this.notification.showError('Failed to load cs! Error: ' + e.messageerror)
            });
          },
          error: (e) => this.notification.showError('Failed to load bs! Error: ' + e.messageerror)
        });
      },
      error: (e) => this.notification.showError('Failed to load as! Error: ' + e.messageerror)
    })
  }

Function restructureABCs() depends on as/bs & cs.
as, bs & cs don’t depend on each other.
Current implementation is ugly and can be improved but I’m not sure which operator I should use. It doesn’t make sense to me to use concatMap as (according to my possibly flawed understanding) multiple streams are going to be merged into one, which I don’t want.
All I need is to make sure that as/bs & cs are loaded before restructureABCs() function is invoked.

Angular13, rxjs7.4

Source: Angular Questions

Published
Categorized as angular, angular13, rxjs, rxjs7 Tagged , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq