Help Angular by taking a 1 minute survey!Go to surveyHome

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 string | Request
options 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 string
options 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 string
body any
options 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 string
body any
options 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 string
options 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 string
body any
options 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 string
options 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 string
options 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));