CODEWITHSUNDEEP
angularrxjs
Tuval4980
Tuval4980

Reputation: 71

Using inheritance for subscribe method on Observable at Angular

I'm building an app in which I create http requests from many places.
When I subscribe to each of the Observables created in those places, I use an error lambda as a parameter for that subscribe method and that error lambda has some common code in each one of them.
Is there any way to use inheritance in that case for removing this duplicate code?

In order to clarify what I want, I'll show you the following simple angular project:

app.component.html:

<button (click)="showConfig()"> button1 </button>
<app-comp></app-comp>

app.component.ts:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
    isError: boolean = false;

    constructor(private http: HttpClient) {}

    getConfig() { 
        return this.http.get('assets/config.json'); 
    }
    
    showConfig() {
        this.getConfig()
        .subscribe(
            data => {
                console.log(data);
            },
            error => {
                // common error area for all subscribe methods in the app
                console.log(error);
                this.isError = true;
                
                // do some unique stuff from here
            }
        );
    }
}

comp.component.html:

<button (click)="showConfig2()"> button2 </button>

comp.component.ts:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-comp',
  templateUrl: './comp.component.html'
})

export class CompComponent {
    isError: boolean = false;
    
    constructor(private http: HttpClient) { }
    
    getConfig2() { 
        return this.http.get('assets/config2.json'); 
    }
    
    showConfig2() {
        this.getConfig2()
        .subscribe(
            data => {
                console.log(data);
            },
            error => {
                // common error area for all subscribe methods in the app
                console.log(error);
                this.isError = true;
                
                // do some unique stuff from here
            }
        );
    }
}

config.json:

{ "field1": "value1" }

config2.json:

{ "field2": "value2" }

So what I want here is to use inheritance for removing the following common code on the error lambda:

                console.log(error);
                this.isError = true;

I assume that those two lines will always be executed from any error lambda parameter of an Observable subscribe method, so I would like to find a way in which I use some class in which I won't have to write this code or even call for a function that does that (because it will be an inner implementation inside that class, which will be extended).
Is that possible?

Upvotes: 0

Views: 126

Answers (1)

jonivrapi
jonivrapi

Reputation: 141

Would you consider using an HttpInterceptor to catch any errors that happen when you make http calls? This interceptor could then inject a service which holds your error state as a Subject. Anywhere else in your application where you need to do something based upon a change in that error state could then subscribe to that subject and do whatever needs to be done. As a side note, I would also recommend using the rxjs catchError() within an observable sequence instead of doing it how you are doing it in the example.

Another way to do this, if you exported your http calls into a service(s), would be to create a single method in that service(s) to handle errors for all http calls within that service. This is less good than the above approach, however it would still significantly reduce duplication compared to your first approach.

Something else you may want to look at is Angular's ErrorHandler.

Upvotes: 2

Related Questions