Last active
March 12, 2023 14:50
-
-
Save bbogdanov/e573c9d1cc8468211b35964a942aa688 to your computer and use it in GitHub Desktop.
Extending Angular HttpClient
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} |
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
@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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 a
POSTrequest 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 An
Observableof the
HTTPResponsefor 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 a
POSTrequest that interprets the body as a text stream and returns * the full
HTTPResponse. * * @param url The endpoint URL. * @param body The content to replace with. * @param options HTTP options * * @return An
Observableof the
HTTPResponsefor 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>>;