Skip to content

Instantly share code, notes, and snippets.

@bbogdanov
Last active March 12, 2023 14:50
Show Gist options
  • Save bbogdanov/e573c9d1cc8468211b35964a942aa688 to your computer and use it in GitHub Desktop.
Save bbogdanov/e573c9d1cc8468211b35964a942aa688 to your computer and use it in GitHub Desktop.
Extending Angular HttpClient
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);
}
}
@mustafah
Copy link

Thank you ...

@justerror
Copy link

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

@ShaileshBhatNP
Copy link

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

@samueleyre
Copy link

@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.

@bbogdanov
Copy link
Author

bbogdanov commented Sep 26, 2018

@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.

@inferiore
Copy link

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.

@gribchic
Copy link

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>>;

Copy link

ghost commented Apr 22, 2020

Nice thanks.

@vrkansagara
Copy link

vrkansagara commented Jul 12, 2022

@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

@vrkansagara
Copy link

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

@bbogdanov
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment