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);
}
}
@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