Extending Angular HttpClient

http-client.ts

import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

export interface IRequestOptions {
  headers?: HttpHeaders;
  observe?: 'body';
  params?: HttpParams;
  reportProgress?: boolean;
  responseType?: 'json';
  withCredentials?: boolean;
  body?: any;
}

export function applicationHttpClientCreator(http: HttpClient) {
  return new ApplicationHttpClient(http);
}

@Injectable()
export class ApplicationHttpClient {

  private api = 'https://someurl.example';

  // Extending the HttpClient through the Angular DI.
  public constructor(public http: HttpClient) {
    // If you don't want to use the extended versions in some cases you can access the public property and use the original one.
    // for ex. this.httpClient.http.get(...)
  }

  /**
   * GET request
   * @param {string} endPoint it doesn't need / in front of the end point
   * @param {IRequestOptions} options options of the request like headers, body, etc.
   * @returns {Observable<T>}
   */
  public Get<T>(endPoint: string, options?: IRequestOptions): Observable<T> {
    return this.http.get<T>(this.api + endPoint, options);
  }

  /**
   * POST request
   * @param {string} endPoint end point of the api
   * @param {Object} params body of the request.
   * @param {IRequestOptions} options options of the request like headers, body, etc.
   * @returns {Observable<T>}
   */
  public Post<T>(endPoint: string, params: Object, options?: IRequestOptions): Observable<T> {
    return this.http.post<T>(this.api + endPoint, params, options);
  }

  /**
   * PUT request
   * @param {string} endPoint end point of the api
   * @param {Object} params body of the request.
   * @param {IRequestOptions} options options of the request like headers, body, etc.
   * @returns {Observable<T>}
   */
  public Put<T>(endPoint: string, params: Object, options?: IRequestOptions): Observable<T> {
    return this.http.put<T>(this.api + endPoint, params, options);
  }

  /**
   * DELETE request
   * @param {string} endPoint end point of the api
   * @param {IRequestOptions} options options of the request like headers, body, etc.
   * @returns {Observable<T>}
   */
  public Delete<T>(endPoint: string, options?: IRequestOptions): Observable<T> {
    return this.http.delete<T>(this.api + endPoint, options);
  }
}

Thank you ...

Very nice snippet, i'm using this almost in all my projects 👍

How to call this service from component?..Please let me know

@ShaileshBhatNP, you should call it like this :

{ provide: ApplicationHttpClient, useFactory: applicationHttpClientCreator, deps: [HttpClient] },

More info here

But it's not working for me, requests aren't pointing towards my api domain...

Is anyone having the same problem ? I've just upgraded my projet form Angular 4 to Angular 6.

@samueleyre

@ShaileshBhatNP, you should call it like this :

{ provide: ApplicationHttpClient, useFactory: applicationHttpClientCreator, deps: [HttpClient] },

More info here

But it's not working for me, requests aren't pointing towards my api domain...

Is anyone having the same problem ? I've just upgraded my projet form Angular 4 to Angular 6.

https://stackblitz.com/edit/extending-http-client-usage?file=src%2Fapp%2Fapp.component.ts This should help you. If not, contact me I will be happy to help you.

Very example and i take for my project, but a problem.
How to add the authorization header (token) that is saved in ionic Storage?
https://ionicframework.com/docs/storage/
when try to get a token from Storage this return a promise instead of token string.

Would You tell me please how I can override the method 'post'. There is two cases in my project.
One: I need response type json like we have in this example and the other i need string response.
There are two methods response for that in HttpClient:
/** * Constructs aPOSTrequest that interprets the body as a JSON object * and returns an observable of the response. * * @param url The endpoint URL. * @param body The content to replace with. * @param options HTTP options * * @return AnObservableof theHTTPResponse for the request, with a response body in the requested type. */ post<T>(url: string, body: any | null, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: 'body'; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: 'json'; withCredentials?: boolean; }): Observable<T>;
and
/** * Constructs aPOSTrequest that interprets the body as a text stream and returns * the fullHTTPResponse. * * @param url The endpoint URL. * @param body The content to replace with. * @param options HTTP options * * @return An Observableof theHTTPResponse for the request, * with a response body of type string. */ post(url: string, body: any | null, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: 'response'; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: 'text'; withCredentials?: boolean; }): Observable<HttpResponse<string>>;

Nice thanks.

@bbogdanov I was facing issue like Cyclic dependency in HTTP_INTERCEPTORS so I searched around and find very good solution which I would like to propose to add it here.

@ref:-angular/angular#23023 (comment)

get http() {
    return this._injector.get(HttpClient);
  }

constructor(private injector: Injector) { }

// somewhere else
this.http.get();

Is it possible for you to implement injector rather then calling HttpClient as DI

my solution is here

@bbogdanov Is there any way to add http req/res interceptor in this ?

@vrkansagara Hi, what you are suggesting here doesn't solve what the issue in angular you shared has as a case. The suggestion you have just postpones getting the instance of the HttpClient as well as bringing and overhead cause on every execution of the get http() it will ask the DI to give you an instance.