Show Menu

Angular 2 Http Cheat Sheet by

Angular 2 Http
http     angular     ng2

Starting Up

@NgModule({
     declarations: [],
     imports: [HttpModule],
     bootstrap: [],
     providers: []
})

Using Angular HTTP

constructor(private http: Http) {}

Http Verbs

GET
get(url: string, options?: Reques­tOp­tio­nsArgs) : Observ­abl­e<R­esp­ons­e> Performs a request with get http method.
POST
post(url: string, body: any, options?: Reques­tOp­tio­nsArgs) : Observ­abl­e<R­esp­ons­e> Performs a request with post http method.
PUT
put(url: string, body: any, options?: Reques­tOp­tio­nsArgs) : Observ­abl­e<R­esp­ons­e> Performs a request with put http method.
DELETE
delete­(url: string, options?: Reques­tOp­tio­nsArgs) : Observ­abl­e<R­esp­ons­e> Performs a request with delete http method.
PATCH
patch(url: string, body: any, options?: Reques­tOp­tio­nsArgs) : Observ­abl­e<R­esp­ons­e> Performs a request with patch http method.
HEAD
head(url: string, options?: Reques­tOp­tio­nsArgs) : Observ­abl­e<R­esp­ons­e> Performs a request with head http method.
OPTIONS
option­s(url: string, options?: Reques­tOp­tio­nsArgs) : Observ­abl­e<R­esp­ons­e> Performs a request with options http method.

Reques­tOp­tio­nsArgs


interface RequestOptionsArgs {
  url : string
  method : string|RequestMethod
  search : string|URLSearchParams
  headers : Headers
  body : any
  withCredentials : boolean
  responseType : ResponseContentType
}

Headers


class Headers {
  staticfromResponseHeaderString(headersString: string) : Headers
  constructor(headers?: Headers|{[name: string]: any})
  append(name: string, value: string) : void
  delete(name: string) : void
  forEach(fn: (values: string[], name: string, headers: Map<string, string[]>) => void) : void
  get(name: string) : string
  has(name: string) : boolean
  keys() : string[]
  set(name: string, value: string|string[]) : void
  values() : string[][]
  toJSON() : {[name: string]: any}
  getAll(name: string) : string[]
  entries()
}

Observ­ables - Flow

 

Sample Delegate

import { Injectable } from [email protected]/core';
import {Http, Response, Headers, RequestOptions} from "@angular/http";
import 'rxjs/Rx';
import {Observable} from "rxjs";
import {Post} from "./http/post.class";


@Injectable()
export class HttpService {

  constructor(private http: Http) { }

  private requestUrl: string = 'http://localhost:4000/posts';

  //Do all methods and observable options

  getData(id : number) : Observable<Post> {
    return this.http.get(${this.requestUrl}/${id})
      .map(this.mapResponse)
      .catch(this.handleError)
  }

  handleError(error: any): Observable<any> {
    console.error('An error occurred', error);
    return Observable.throw(error.json() || 'Server error');
  }

  mapResponse(response : Response) : Post {
    return response.json();
  }

  addData(body : Post) : Observable<Post> {
    let bodyString = JSON.stringify(body);
    let header = new Headers({
      'Content-Type' : 'application/json'
    });
    let options = new RequestOptions({
      headers : header
    });

    return this.http.post(${this.requestUrl}, bodyString, options)
      .map(this.mapResponse)
      .catch(this.handleError);
  }

  updateData(body : Post) : Observable<Post> {
    let bodyString = JSON.stringify(body);
    let header = new Headers({
      'Content-Type' : 'application/json'
    });
    let options = new RequestOptions({
      headers : header
    });

    return this.http.put(${this.requestUrl}/${body.id}, bodyString, options)
      .map(this.mapResponse)
      .catch(this.handleError);
  }

  deleteData(body : Post) : Observable<Post> {
    return this.http.delete(${this.requestUrl}/${body.id})
      .map(this.mapResponse)
      .catch(this.handleError);
  }

}
 

Rx - Map

getData(id : number) : Observable<Post> {
    return this.http.get(${this.requestUrl}/${id})
      .map(this.mapResponse)
      .catch(this.handleError)
  }


  mapResponse(response : Response) : Post {
    return response.json();
  }
The map() function takes in a lambda function or a reference to a function that will execute the procedure and return the mapped result.
Accepts (res : Respone) and returns a result.

Rx - catch

getData(id : number) : Observable<Post> {
    return this.http.get(${this.requestUrl}/${id})
      .map(this.mapResponse)
      .catch(this.handleError)
  }

  handleError(error: any): Observable<any> {
    console.error('An error occurred', error);
    return Observable.throw(error.json() || 'Server error');
  }
The catch reference is there to handle exceptions that are thrown. This gives you an opport­unity to handle them in a graceful manner.
All rx operations return an observ­able.

Observable - Subscribe

observ­erO­rNext
Partia­lOb­ser­ver­<T> | ((value: T) => void)
error
(error: any) => void
complete
() => void
this.s­erv­ice.ge­tDa­ta(­10).su­bsc­ribe(
(data : Post) => {
this.r­esult = data;
},
(error : any) => {
consol­e.e­rro­r(e­rror);
}
)

Reference

private requestUrl: string = 'http://localhost:4000/posts';

  getData(id : number) : Observable<Post> {
    return this.http.get(${this.requestUrl}/${id})
      .map(this.mapResponse)
      .catch(this.handleError)
  }
Using the back ticks to specify internal references ``
refere­ncing the content in ${}

Download the Angular 2 Http Cheat Sheet

3 Pages
//media.cheatography.com/storage/thumb/nathane2005_angular-2-http.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          AngularJS Cheat Sheet
          HTTP Status Codes Cheat Sheet
          Angular 2 Forms Cheat Sheet

          More Cheat Sheets by Nathane2005

          Angular2 Pipes Cheat Sheet
          Angular 2 Forms Cheat Sheet