W3cubDocs

HttpClient

class

Performs HTTP requests. This service is available as an injectable class, with methods to perform HTTP requests. Each request method has multiple signatures, and the return type varies based on the signature that is called (mainly the values of observe and responseType).

class HttpClient {
  request(first: string | HttpRequest<any>, url?: string, options: { body?: any; headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body" | "events" | "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "arraybuffer" | ... 2 more ... | "json"; withCredentials?: boolean; } = {}): Observable<any>
  delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body" | "events" | "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "arraybuffer" | ... 2 more ... | "json"; withCredentials?: boolean; } = {}): Observable<any>
  get(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body" | "events" | "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "arraybuffer" | ... 2 more ... | "json"; withCredentials?: boolean; } = {}): Observable<any>
  head(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body" | "events" | "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "arraybuffer" | ... 2 more ... | "json"; withCredentials?: boolean; } = {}): Observable<any>
  jsonp<T>(url: string, callbackParam: string): Observable<T>
  options(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body" | "events" | "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "arraybuffer" | ... 2 more ... | "json"; withCredentials?: boolean; } = {}): Observable<any>
  patch(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body" | "events" | "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "arraybuffer" | ... 2 more ... | "json"; withCredentials?: boolean; } = {}): Observable<any>
  post(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body" | "events" | "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "arraybuffer" | ... 2 more ... | "json"; withCredentials?: boolean; } = {}): Observable<any>
  put(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body" | "events" | "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "arraybuffer" | ... 2 more ... | "json"; withCredentials?: boolean; } = {}): Observable<any>
}

Provided in

```
HttpClientModule
```

Description

Note that the responseType options value is a String that identifies the single data type of the response. A single overload version of the method handles each response type. The value of responseType cannot be a union, as the combined signature could imply.

Further information available in the Usage Notes...

Methods

request()

method

string

The HTTP method.

url

string

The endpoint URL.

options

object

The HTTP options to send with the request.

Optional. Default is undefined.

Returns

Observable<Object>: An Observable of the HttpResponse, with the response body of type Object.

Overload #16

Constructs a request which interprets the body as a JSON object with the response body of the requested type.

`request<R>(method: string, url: string, options?: { body?: any; headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; responseType?: "json"; reportProgress?: boolean; withCredentials?: boolean; }): Observable<R>`

Parameters

method

string

The HTTP method.

url

string

The endpoint URL.

options

object

The HTTP options to send with the request.

Optional. Default is undefined.

Returns

Observable<R>: An Observable of the HttpResponse, with the response body of type R.

Overload #17

Constructs a request where response type and requested observable are not known statically.

`request(method: string, url: string, options?: { body?: any; headers?: HttpHeaders | { [header: string]: string | string[]; }; params?: HttpParams | { [param: string]: string | string[]; }; observe?: "body" | "events" | "response"; reportProgress?: boolean; responseType?: "arraybuffer" | ... 2 more ... | "json"; withCredentials?: boolean; }): Observable<any>`

Parameters

method

string

The HTTP method.

url

string

The endpoint URL.

options

object

The HTTP options to send with the request.

Optional. Default is undefined.

Returns

Observable<any>: An Observable of the reuested response, wuth body of type any.

You can pass an HttpRequest directly as the only parameter. In this case, the call returns an observable of the raw HttpEvent stream.

Alternatively you can pass an HTTP method as the first parameter, a URL string as the second, and an options hash containing the request body as the third. See addBody(). In this case, the specified responseType and observe options determine the type of returned observable.

The responseType value determines how a successful response body is parsed.
If responseType is the default json, you can pass a type interface for the resulting object as a type parameter to the call.

The observe value determines the return type, according to what you are interested in observing.

An observe value of events returns an observable of the raw HttpEvent stream, including progress events by default.
An observe value of response returns an observable of HttpResponse<T>, where the T parameter depends on the responseType and any optionally provided type parameter.
An observe value of body returns an observable of <T> with the same T body type.

delete()

url

string

The endpoint URL.

options

object

The HTTP options to send with the request.

Optional. Default is undefined.

Returns

Observable<Object>: An Observable of the response, with the response body of type Object.

Overload #15

Constructs a DELETE request that interprets the body as a JSON object and returns the response in a given type.

`delete<T>(url: string, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>`

Parameters

url

string

The endpoint URL.

options

object

The HTTP options to send with the request.

Optional. Default is undefined.

Returns

Observable<T>: An Observable of the HttpResponse, with response body in the requested type.

get()

url

string

The endpoint URL.

options

object

The HTTP options to send with the request.

Optional. Default is undefined.

Returns

Observable<Object>: An Observable of the response body as a JSON object.

Overload #15

Constructs a GET request that interprets the body as a JSON object and returns the response body in a given type.

`get<T>(url: string, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>`

Parameters

url

string

The endpoint URL.

options

object

The HTTP options to send with the request.

Optional. Default is undefined.

Returns

Observable<T>: An Observable of the HttpResponse, with a response body in the requested type.

head()

url

string

The endpoint URL.

options

object

The HTTP options to send with the request.

Optional. Default is undefined.

Returns

Observable<Object>: An Observable of the response, with the response body as a JSON object.

Overload #15

Constructs a HEAD request that interprets the body as a JSON object and returns the response in a given type.

`head<T>(url: string, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>`

Parameters

url

string

The endpoint URL.

options

object

The HTTP options to send with the request.

Optional. Default is undefined.

Returns

Observable<T>: An Observable of the HttpResponse for the request, with a response body of the given type.

jsonp()

Constructs an Observable that, when subscribed, causes a request with the special method JSONP to be dispatched via the interceptor pipeline. The JSONP pattern works around limitations of certain API endpoints that don't support newer, and preferable CORS protocol. JSONP treats the endpoint API as a JavaScript file and tricks the browser to process the requests even if the API endpoint is not located on the same domain (origin) as the client-side application making the request. The endpoint API must support JSONP callback for JSONP requests to work. The resource API returns the JSON response wrapped in a callback function. You can pass the callback function name as one of the query parameters. Note that JSONP requests can only be used with GET requests.

Constructs a JSONP request for the given URL and name of the callback parameter.

`jsonp(url: string, callbackParam: string): Observable<Object>`

Parameters

`url`	`string`	The resource URL.
`callbackParam`	`string`	The callback function name.

Returns

Observable<Object>: An Observable of the response object, with response body as an object.

Constructs a JSONP request for the given URL and name of the callback parameter.

`jsonp<T>(url: string, callbackParam: string): Observable<T>`

Parameters

url

string

The resource URL.

callbackParam

string

The callback function name.

You must install a suitable interceptor, such as one provided by HttpClientJsonpModule. If no such interceptor is reached, then the JSONP request can be rejected by the configured backend.

Returns

Observable<T>: An Observable of the response object, with response body in the requested type.

options()

url

string

The endpoint URL.

options

object

HTTP options.

Optional. Default is undefined.

Returns

Observable<Object>: An Observable of the response, with the response body as a JSON object.

Overload #15

Constructs an OPTIONS request that interprets the body as a JSON object and returns the response in a given type.

`options<T>(url: string, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>`

Parameters

url

string

The endpoint URL.

options

object

HTTP options.

Optional. Default is undefined.

Returns

Observable<T>: An Observable of the HttpResponse, with a response body of the given type.

patch()

url

string

The endpoint URL.

body

any

The resources to edit.

options

object

HTTP options.

Optional. Default is undefined.

Returns

Observable<Object>: An Observable of the response, with the response body as a JSON object.

Overload #15

Constructs a PATCH request that interprets the body as a JSON object and returns the response in a given type.

`patch<T>(url: string, body: any, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>`

Parameters

url

string

The endpoint URL.

body

any

The resources to edit.

options

object

HTTP options.

Optional. Default is undefined.

Returns

Observable<T>: An Observable of the HttpResponse for the request, with a response body in the given type.

post()

url

string

The endpoint URL.

body

any

The content to replace with.

options

object

HTTP options

Optional. Default is undefined.

Returns

Observable<Object>: An Observable of the response, with the response body as a JSON object.

Overload #15

Constructs a POST request that interprets the body as a JSON object and returns an observable of the response.

`post<T>(url: string, body: any, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>`

Parameters

url

string

The endpoint URL.

body

any

The content to replace with.

options

object

HTTP options

Optional. Default is undefined.

Returns

Observable<T>: An Observable of the HttpResponse for the request, with a response body in the requested type.

put()

url

string

The endpoint URL.

body

any

The resources to add/update.

options

object

HTTP options

Optional. Default is undefined.

Returns

Observable<Object>: An Observable of the response as a JSON object.

Overload #15

Constructs a PUT request that interprets the body as an instance of the requested type and returns an observable of the requested type.

`put<T>(url: string, body: any, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>`

Parameters

url

string

The endpoint URL.

body

any

The resources to add/update.

options

object

HTTP options

Optional. Default is undefined.

Returns

Observable<T>: An Observable of the requested type.

Usage notes

Sample HTTP requests for the Tour of Heroes application.

HTTP Request Example

// GET heroes whose name contains search term
searchHeroes(term: string): observable<Hero[]>{

 const params = new HttpParams({fromString: 'name=term'});
   return this.httpClient.request('GET', this.heroesUrl, {responseType:'json', params});
}

Alternatively, the parameter string can be used without invoking HttpParams by directly joining to the URL.

this.httpClient.request('GET', this.heroesUrl + '?' + 'name=term', {responseType:'json'});

JSONP Example

requestJsonp(url, callback = 'callback') {
 return this.httpClient.jsonp(this.heroesURL, callback);
}

PATCH Example

// PATCH one of the heroes' name
patchHero (id: number, heroName: string): Observable<{}> {
const url = `${this.heroesUrl}/${id}`;   // PATCH api/heroes/42
 return this.httpClient.patch(url, {name: heroName}, httpOptions)
   .pipe(catchError(this.handleError('patchHero')));
}

© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/common/http/HttpClient

HttpClient

See also

Provided in

Description

Methods

17 overloads...

Overload #1

request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>

Parameters

Returns

Overload #2

Parameters

Returns

Overload #3

Parameters

Returns

Overload #4

Parameters

Returns

Overload #5

Parameters

Returns

Overload #6

Parameters

Returns

Overload #7

Parameters

Returns

Overload #8

Parameters

Returns

Overload #9

Parameters

Returns

Overload #10

Parameters

Returns

Overload #11

Parameters

Returns

Overload #12

Parameters

Returns

Overload #13

Parameters

Returns

Overload #14

Parameters

Returns

Overload #15

Parameters

Returns

Overload #16

Parameters

Returns

Overload #17

Parameters

Returns

15 overloads...

Overload #1

delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "arraybuffer"; withCredentials?: boolean; }): Observable<ArrayBuffer>

Parameters

Returns

Overload #2

delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "blob"; withCredentials?: boolean; }): Observable<Blob>

Parameters

Returns

Overload #3

delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "text"; withCredentials?: boolean; }): Observable<string>

Parameters

Returns

Overload #4

delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "arraybuffer"; withCredentials?: boolean; }): Observable<HttpEvent<ArrayBuffer>>

Parameters

Returns

Overload #5

delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "blob"; withCredentials?: boolean; }): Observable<HttpEvent<Blob>>

Parameters

Returns

Overload #6

`request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>`

`delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "arraybuffer"; withCredentials?: boolean; }): Observable<ArrayBuffer>`

`delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "blob"; withCredentials?: boolean; }): Observable<Blob>`

`delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "text"; withCredentials?: boolean; }): Observable<string>`

`delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "blob"; withCredentials?: boolean; }): Observable<HttpEvent<Blob>>`

`delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "text"; withCredentials?: boolean; }): Observable<HttpEvent<string>>`

`delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<HttpEvent<Object>>`

`delete<T>(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "events"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<HttpEvent<T>>`

`delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "blob"; withCredentials?: boolean; }): Observable<HttpResponse<Blob>>`

`delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "text"; withCredentials?: boolean; }): Observable<HttpResponse<string>>`

`delete(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<HttpResponse<Object>>`

`delete<T>(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe: "response"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<HttpResponse<T>>`

`delete(url: string, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<Object>`

`delete<T>(url: string, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>`

`get(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "arraybuffer"; withCredentials?: boolean; }): Observable<ArrayBuffer>`

`get(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "blob"; withCredentials?: boolean; }): Observable<Blob>`

`get(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType: "text"; withCredentials?: boolean; }): Observable<string>`