This is the archived documentation for Angular v6. Please visit angular.io to see documentation for the current version of Angular.

Http

Performs http requests using XMLHttpRequest as the default backend.

See more...

Deprecated: see https://angular.io/guide/http

      
      class Http {
  protected _backend: ConnectionBackend
  protected _defaultOptions: RequestOptions
  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>
  get(url: string, options?: RequestOptionsArgs): Observable<Response>
  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
  put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
  delete(url: string, options?: RequestOptionsArgs): Observable<Response>
  patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
  head(url: string, options?: RequestOptionsArgs): Observable<Response>
  options(url: string, options?: RequestOptionsArgs): Observable<Response>
}
    

Subclasses

Description

Http is available as an injectable class, with methods to perform http requests. Calling request returns an Observable which will emit a single Response when a response is received.

Properties

Property Description
protected _backend: ConnectionBackend
protected _defaultOptions: RequestOptions

Methods

Performs any type of http request. First argument is required, and can either be a url or a Request instance. If the first argument is a url, an optional RequestOptions object can be provided as the 2nd argument. The options object will be merged with the values of BaseRequestOptions before performing the request.

request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>
      
      request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>
    

Parameters

url

Type: string | Request.

options

Type: RequestOptionsArgs.

Optional. Default is undefined.

Returns

Observable<Response>

Performs a request with get http method.

get(url: string, options?: RequestOptionsArgs): Observable<Response>
      
      get(url: string, options?: RequestOptionsArgs): Observable<Response>
    

Parameters

url

Type: string.

options

Type: RequestOptionsArgs.

Optional. Default is undefined.

Returns

Observable<Response>

Performs a request with post http method.

post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
      
      post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
    

Parameters

url

Type: string.

body

Type: any.

options

Type: RequestOptionsArgs.

Optional. Default is undefined.

Returns

Observable<Response>

Performs a request with put http method.

put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
      
      put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
    

Parameters

url

Type: string.

body

Type: any.

options

Type: RequestOptionsArgs.

Optional. Default is undefined.

Returns

Observable<Response>

Performs a request with delete http method.

delete(url: string, options?: RequestOptionsArgs): Observable<Response>
      
      delete(url: string, options?: RequestOptionsArgs): Observable<Response>
    

Parameters

url

Type: string.

options

Type: RequestOptionsArgs.

Optional. Default is undefined.

Returns

Observable<Response>

Performs a request with patch http method.

patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
      
      patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>
    

Parameters

url

Type: string.

body

Type: any.

options

Type: RequestOptionsArgs.

Optional. Default is undefined.

Returns

Observable<Response>

Performs a request with head http method.

head(url: string, options?: RequestOptionsArgs): Observable<Response>
      
      head(url: string, options?: RequestOptionsArgs): Observable<Response>
    

Parameters

url

Type: string.

options

Type: RequestOptionsArgs.

Optional. Default is undefined.

Returns

Observable<Response>

Performs a request with options http method.

options(url: string, options?: RequestOptionsArgs): Observable<Response>
      
      options(url: string, options?: RequestOptionsArgs): Observable<Response>
    

Parameters

url

Type: string.

options

Type: RequestOptionsArgs.

Optional. Default is undefined.

Returns

Observable<Response>

Usage notes

Example

import {Http, HTTP_PROVIDERS} from '@angular/http'; import {map} from 'rxjs/operators'; @Component({ selector: 'http-app', viewProviders: [HTTP_PROVIDERS], templateUrl: 'people.html' }) class PeopleComponent { constructor(http: Http) { http.get('people.json') // Call map on the response observable to get the parsed people object .pipe(map(res => res.json())) // Subscribe to the observable to get the parsed people object and attach it to the // component .subscribe(people => this.people = people); } }
      
      
  1. import {Http, HTTP_PROVIDERS} from '@angular/http';
  2. import {map} from 'rxjs/operators';
  3.  
  4. @Component({
  5. selector: 'http-app',
  6. viewProviders: [HTTP_PROVIDERS],
  7. templateUrl: 'people.html'
  8. })
  9. class PeopleComponent {
  10. constructor(http: Http) {
  11. http.get('people.json')
  12. // Call map on the response observable to get the parsed people object
  13. .pipe(map(res => res.json()))
  14. // Subscribe to the observable to get the parsed people object and attach it to the
  15. // component
  16. .subscribe(people => this.people = people);
  17. }
  18. }

Example

http.get('people.json').subscribe((res:Response) => this.people = res.json());
      
      http.get('people.json').subscribe((res:Response) => this.people = res.json());
    

The default construct used to perform requests, XMLHttpRequest, is abstracted as a "Backend" ( XHRBackend in this case), which could be mocked with dependency injection by replacing the XHRBackend provider, as in the following example:

Example

import {BaseRequestOptions, Http} from '@angular/http'; import {MockBackend} from '@angular/http/testing'; var injector = Injector.resolveAndCreate([ BaseRequestOptions, MockBackend, {provide: Http, useFactory: function(backend, defaultOptions) { return new Http(backend, defaultOptions); }, deps: [MockBackend, BaseRequestOptions]} ]); var http = injector.get(Http); http.get('request-from-mock-backend.json').subscribe((res:Response) => doSomething(res));
      
      
  1. import {BaseRequestOptions, Http} from '@angular/http';
  2. import {MockBackend} from '@angular/http/testing';
  3. var injector = Injector.resolveAndCreate([
  4. BaseRequestOptions,
  5. MockBackend,
  6. {provide: Http, useFactory:
  7. function(backend, defaultOptions) {
  8. return new Http(backend, defaultOptions);
  9. },
  10. deps: [MockBackend, BaseRequestOptions]}
  11. ]);
  12. var http = injector.get(Http);
  13. http.get('request-from-mock-backend.json').subscribe((res:Response) => doSomething(res));