Observable can't pass in finally from err state

user_9275568 0
Viewed 63

Is not first time when I encounter this problem. Because I want to display some data on web page, even if the http request failed, I have some logique inside the err state. To not duplicate code in subscribe and err, I use to write it inside complete/finally state.

this.loadingResults = true;
this.service.get().subscribe(data => {
   // do something with the data
}, err => {
   this.initializeData();
}, () => {
   this.loadingResults = false;
   this.cd.detectChanges(); 
});

Because in the page I use a spinner how time I wait for the response, when it came (successfully or not, on subscribe or err), I want to change the loadingResults value to false and using ChangeDetectorRef to refresh the data on page.

The problem is that the above code will not work correctly and I need to renounce at finally function:

this.loadingResults = true;
this.service.get().subscribe(data => {
   // do something with the data
   this.loadingResults = false;
   this.cd.detectChanges(); 
}, err => {
   this.initializeData();
   this.loadingResults = false; // duplicate
   this.cd.detectChanges(); // duplicate
});

What's the best way to use finally and avoid repeat code in the rest of response types? I see its behavior is not like try-catch-finally from backend (Java/C#)

subscribe observable rxjs angular typescript
1 Answers

The subscribe callbacks error and complete are mutually exclusive. One wouldn't be triggered if the other was triggered. Instead you could use the finalize operator. It'll be triggered in case of completion or errors.

this.loadingResults = true;
this.service.get().pipe(
  finalize(() => {
    this.loadingResults = false;
    this.cd.detectChanges(); 
  })
).subscribe(
  data => {
    // do something with the data
  }, 
  err => {
    this.initializeData();
  }
);

Also curiously, why are you triggering change detection manually? Whats stopping it from being triggered automatically?

user_65139210
Related