Joining subscriptions: How to synchronize completion of multiple subscriptions in a single operation

Question

Joining subscriptions: How to synchronize completion of multiple subscriptions in a single operation

As a newcomer to RXJS, I am facing a particular challenge that I need help with.

I have two API calls, where the second call is dependent on the result of the first one. My issue lies in needing to handle both calls within a single subscription so that the finalize function triggers only after both subscriptions are completed. Currently, the finalize function triggers after the first observable finishes, not waiting for the second one to complete as well.

private getTemplate(){
this.loading = true;
this.service.getTemplate()
.pipe(
  finalize(() => this.loading = false)
)
.subscribe(
  (response) => {
    if (response) {
       this.createImage(response.link);
    }
  }
)

}

public createImage(link: string) {
this.service.createImage(link)
.subscribe(
  (response) => {
    this.image = response;
  }
)

angular typescript rxjs

Answer 1

Answer №1

To handle this situation, I recommend using a switchMap approach.

private manageData(){
  this.loading = true
  this.myService.getData().pipe(
    filter(response => !!response),
    switchMap(response => this.processData(response.link)),
    finalize(() => this.loading = false)
  ).subscribe()
}

public processData(link: string) {
  return this.service.processLink(link).pipe(
    tap(response => {
      this.data = response
    })
  )
)

The switchMap function will wait for the first observable to emit and then trigger the second one. By including the finalize() within the same pipe(), it will execute after the second observable is emitted.

It's crucial to ensure that the Observable is returned from processData so it can be utilized inside the pipe().

In the initial code snippet, the .subscribe() does not have any content. You can move the finalize logic here for the same behavior.

private manageData(){
  this.loading = true
  this.myService.getData().pipe(
    filter(response => !!response),
    switchMap(response => this.processData(response.link))
  ).subscribe(() => {
    this.loading = false
  })
}

If you need to pass data from getData to the subscribe() callback:

private manageData(){
  this.loading = true
  this.myService.getData().pipe(
    filter(response => !!response),
    switchMap(response => 
      combineLatest([of(response), this.processData(response.link)])
    )
  ).subscribe(([responseData, processedData]) => {
    this.loading = false
  })
}

Answer 2

To handle this situation, I recommend using a switchMap approach.

private manageData(){
  this.loading = true
  this.myService.getData().pipe(
    filter(response => !!response),
    switchMap(response => this.processData(response.link)),
    finalize(() => this.loading = false)
  ).subscribe()
}

public processData(link: string) {
  return this.service.processLink(link).pipe(
    tap(response => {
      this.data = response
    })
  )
)

The switchMap function will wait for the first observable to emit and then trigger the second one. By including the finalize() within the same pipe(), it will execute after the second observable is emitted.

It's crucial to ensure that the Observable is returned from processData so it can be utilized inside the pipe().

In the initial code snippet, the .subscribe() does not have any content. You can move the finalize logic here for the same behavior.

private manageData(){
  this.loading = true
  this.myService.getData().pipe(
    filter(response => !!response),
    switchMap(response => this.processData(response.link))
  ).subscribe(() => {
    this.loading = false
  })
}

If you need to pass data from getData to the subscribe() callback:

private manageData(){
  this.loading = true
  this.myService.getData().pipe(
    filter(response => !!response),
    switchMap(response => 
      combineLatest([of(response), this.processData(response.link)])
    )
  ).subscribe(([responseData, processedData]) => {
    this.loading = false
  })
}

Answer 3

Answer №2

If you want to subscribe to the second stream based on the result of the first, you can use switchMap. To ensure that you only proceed to the second stream if the first response is valid (if (response)), you can utilize filter.

An example implementation could look like this:

private fetchTemplate() {

  this.loading = true;
  this.networkService.getTemplate().pipe(

    filter(response => !!response),
    switchMap(resp => this.imageService.createImage(resp.link)),
    finalize(() => this.loading = false)

  ).subscribe(resp => this.imageData = resp);
  
}

Answer 4

If you want to subscribe to the second stream based on the result of the first, you can use switchMap. To ensure that you only proceed to the second stream if the first response is valid (if (response)), you can utilize filter.

An example implementation could look like this:

private fetchTemplate() {

  this.loading = true;
  this.networkService.getTemplate().pipe(

    filter(response => !!response),
    switchMap(resp => this.imageService.createImage(resp.link)),
    finalize(() => this.loading = false)

  ).subscribe(resp => this.imageData = resp);
  
}

Joining subscriptions: How to synchronize completion of multiple subscriptions in a single operation

Answer №1

Answer №2

Similar questions

Are additional Angular tags causing issues with the HTML layout in development mode?

Personalized Functions Using Material Design Expansion Panel Header Icon

How to efficiently manage multiple input fields with a single ref in React using TypeScript

Do attributes from our Angular app's <head> and <meta> tags get inherited by asynchronously pulled in HTML?

What is the best way to display multiple items on a single page using the Ant Design (NG-Zorro) carousel component?

What can be done to stop the default route from redirecting to "#/"?

Angular service fails to change the object's value

Move up to the next level with Angular2 Bootstrap Pagination

Encountering a ReferenceError while attempting to implement logic on a newly created page

Utilize Angular Ag-grid's feature called "Columns Tool Panel" to trigger checkbox events

What is the best way to extract accurate information from an observable?

Failed to divide the value into separate substring fields

Implementing dynamic data updates for the yAxis in a chart using Highcharts and Angular 2/4

Quietly renewing leads to OAuthErrorEvent with the type "silent_refresh_timeout" and no information on the reason or params

Attempting to establish a connection with MongoDB through Realm

Why does TypeScript struggle to accurately deduce the return type when provided with certain parameter values?

The Redux state fails to update on the initial attempt

Guide to creating an Express + TypeScript API using an OpenAPI 3.0 specification

I am having trouble with CSS, JS, and image files not loading when using Angular 9 loadChildren

What is the best way to define a function that accepts an object with a specific key, while also allowing for any additional keys to be passed