Refining Angular service coding techniques

Question

Refining Angular service coding techniques

In my application, I have implemented this specific format to interact with an API and retrieve data from it.

Below is the code snippet taken from one of the service.ts files:

getCheckoutDetails(): Observable<UserDetail> {
    let query = `7668`;
    return this.http
        .get(this.appConfig.getAPIUrl()
            + `/buy/getDetails?${query}`)
        .map(this.extractData)
        .catch(this.handleErrors);
}


private extractData(res: Response) {
    let data = res.json();       
    return data.body ? data.body.message ? data.body.message : {} : {};
}

private handleErrors(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
}

We are now utilizing cpd to identify duplicated code in the application. Interestingly, it points out that there is duplication whenever the methods extractData and handleErrors are utilized.

Is there a more efficient approach to address this issue by employing a base class?

angular typescript optimization

Answer 1

Answer №1

If you want to organize your methods in a more structured way, consider moving them to a base class. Here's an example:

class CoreService {
  constructor(
    private httpClient: HttpClient, 
    @Inject(AppConfiguration) private appConfig: AppConfiguration) {}

  fetchData(url: string) {
     return this.httpClient
            .get(`${this.appConfig.getAPIEndpoint()}${url}`)
            .pipe(map(this.extractResponseData))
            .pipe(catchError(this.handleError));
  }

  private extractResponseData(response: HttpResponse) {
    let data = response.json();
    return data.body ? data.body.message ? data.body.message : {} : {};
  }

  private handleError(error: HttpResponse | any) {
    let errorMessage: string;
    if (error instanceof HttpResponse) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errorMessage = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errorMessage = error.message ? error.message : error.toString();
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }
}

class DetailedService extends CoreService {
  getDetailsForCheckout() {
    let queryParam = '7668';
    return this.fetchData(`/checkout/fetchDetails?${queryParam}`) }
}

Answer 2

If you want to organize your methods in a more structured way, consider moving them to a base class. Here's an example:

class CoreService {
  constructor(
    private httpClient: HttpClient, 
    @Inject(AppConfiguration) private appConfig: AppConfiguration) {}

  fetchData(url: string) {
     return this.httpClient
            .get(`${this.appConfig.getAPIEndpoint()}${url}`)
            .pipe(map(this.extractResponseData))
            .pipe(catchError(this.handleError));
  }

  private extractResponseData(response: HttpResponse) {
    let data = response.json();
    return data.body ? data.body.message ? data.body.message : {} : {};
  }

  private handleError(error: HttpResponse | any) {
    let errorMessage: string;
    if (error instanceof HttpResponse) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errorMessage = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errorMessage = error.message ? error.message : error.toString();
    }
    console.error(errorMessage);
    return throwError(errorMessage);
  }
}

class DetailedService extends CoreService {
  getDetailsForCheckout() {
    let queryParam = '7668';
    return this.fetchData(`/checkout/fetchDetails?${queryParam}`) }
}

Refining Angular service coding techniques

Answer №1

Similar questions

"Exploring the incredible powers of Ionic2, Angular2, HTTP requests, and

Error message: NextJs throws aReferenceError when trying to access the document object on page refresh

Is Angular File API Support Compatible with HTML5?

What is the process for exporting the reducer function and integrating it into the storeModule.forRoot within an Angular application?

How can I get the class name of the drop destination with react-dnd?

Hold off on addressing the nested loops within a TypeScript subscription

Make sure that every component in create-react-app includes an import for react so that it can be properly

What is the TypeScript syntax for defining a component that does not require props to be passed when called?

Installing Angular 4 in Visual Studio 2017

Angular2 - Transmitting validation information from parent component to child component input validation

Angular is unable to modify the value of 'name' since it is either a constant or a property that cannot be modified

Using Typescript to typecast in D3.js

The interface 'HTMLIonIconElement' is not able to extend both 'IonIcon' and 'HTMLStencilElement' types at the same time

Unable to transfer variable from a function to the test in Protractor

Whenever I attempt to run my application using ng serve on Linux, I encounter the error stating: "Module '@angular-devkit/build-angular/package.json' cannot be found."

Monitor changes in a dynamic child component using Angular fire and TypeScript only (no HTML)

Tips for obtaining the passed Tag name when executing the Cypress Framework

Various types of generics within an object

Prevent coverage tracking for files or paths enclosed in square brackets in jest

Error: Undefined Property in Angular 2 ViewChild Declaration