Angular 2 Http Cheat Sheet

by Nathan (Nathane2005) via cheatography.com/28056/cs/8480/

Starting Up Http Verbs (cont) Headers

@NgModule({ PATCH patch(url: string, body: any,

declarations: [], options?: RequestOptionsArgs) : class Headers {
Observable<Response> Performs
imports: [HttpModule], staticfromResponseHeaderString(h
a request with patch http method.
bootstrap: [], eadersString: string) : Headers
HEAD head(url: string, options?:
providers: [] constructor(headers?: Headers|
RequestOptionsArgs) :
}) {[name: string]: any})
Observable<Response> Performs
append(name: string, value:
a request with head http method.
Using Angular HTTP string) : void
OPTIONS options(url: string, options?:
delete(name: string) : void
constructor(private http: Http) {} RequestOptionsArgs) :
Observable<Response> Performs forEach(fn: (values: string[],

a request with options http name: string, headers: Map<string,

Http Verbs
method. string[]>) => void) : void
GET get(url: string, options?:
get(name: string) : string
RequestOptionsArgs) :
RequestOptionsArgs has(name: string) : boolean
Observable<Response> Performs a
keys() : string[]
request with get http method.
interface RequestOptionsArgs { set(name: string, value:
POST post(url: string, body: any, options?:
url : string string|string[]) : void
RequestOptionsArgs) :
Observable<Response> Performs a method : string|RequestMethod values() : string[][]
request with post http method. search : string|URLSearchParams toJSON() : {[name: string]: any}

PUT put(url: string, body: any, options?: headers : Headers getAll(name: string) : string[]
RequestOptionsArgs) : body : any entries()
Observable<Response> Performs a withCredentials : boolean }
request with put http method.
responseType :
DELETE delete(url: string, options?: ResponseContentType Observables - Flow
RequestOptionsArgs) :
}
Observable<Response> Performs a
request with delete http method.

By Nathan (Nathane2005) Published 17th October, 2016. Sponsored by Readability-Score.com

cheatography.com/nathane2005/ Last updated 17th October, 2016. Measure your website readability!
Page 1 of 3. https://readability-score.com
 Angular 2 Http Cheat Sheet
by Nathan (Nathane2005) via cheatography.com/28056/cs/8480/

Sample Delegate Sample Delegate (cont) Sample Delegate (cont)

import { Injectable } from addData(body : Post) : }

'@angular/core'; Observable<Post> { deleteData(body : Post) :
import {Http, Response, Headers, let bodyString = Observable<Post> {
RequestOptions} from JSON.stringify(body); return
"@angular/http"; let header = new Headers({ this.http.delete(${this.requestUr
import 'rxjs/Rx'; 'Content-Type' : l}/${body.id})
import {Observable} from "rxjs"; 'application/json' .map(this.mapResponse)
import {Post} from }); .catch(this.handleError);
"./http/post.class"; let options = new }
@Injectable() RequestOptions({ }
export class HttpService { headers : header
constructor(private http: Http) { }); Rx - Map
} return
getData(id : number) :
private requestUrl: string = this.http.post(${this.requestUrl}
Observable<Post> {
'http://localhost:4000/posts'; , bodyString, options)
return
//Do all methods and observable .map(this.mapResponse)
this.http.get(${this.requestUrl}/$
options .catch(this.handleError);
{id})
getData(id : number) : }
.map(this.mapResponse)
Observable<Post> { updateData(body : Post) :
.catch(this.handleError)
return Observable<Post> {
}
this.http.get(${this.requestUrl}/$ let bodyString =
mapResponse(response : Response)
{id}) JSON.stringify(body);
: Post {
.map(this.mapResponse) let header = new Headers({
return response.json();
.catch(this.handleError) 'Content-Type' :
}
} 'application/json'
handleError(error: any): }); The map() function takes in a lambda function
or a reference to a function that will execute the
Observable<any> { let options = new
procedure and return the mapped result.
console.error('An error RequestOptions({
Accepts (res : Respone) and returns a result.
occurred', error); headers : header
return });
Observable.throw(error.json() || return
'Server error'); this.http.put(${this.requestUrl}/$
} {body.id}, bodyString, options)
mapResponse(response : Response) .map(this.mapResponse)
: Post { .catch(this.handleError);
return response.json();
}

By Nathan (Nathane2005) Published 17th October, 2016. Sponsored by Readability-Score.com

cheatography.com/nathane2005/ Last updated 17th October, 2016. Measure your website readability!
Page 2 of 3. https://readability-score.com
 Angular 2 Http Cheat Sheet
by Nathan (Nathane2005) via cheatography.com/28056/cs/8480/

Rx - catch Reference

getData(id : number) : private requestUrl: string =

Observable<Post> { 'http://localhost:4000/posts';
return getData(id : number) :
this.http.get(${this.requestUrl}/$ Observable<Post> {
{id}) return
.map(this.mapResponse) this.http.get(${this.requestUrl}/$
.catch(this.handleError) {id})
} .map(this.mapResponse)
handleError(error: any): .catch(this.handleError)
Observable<any> { }
console.error('An error
Using the back ticks to specify internal
occurred', error);
references ``
return referencing the content in ${}
Observable.throw(error.json() ||
'Server error');
}

The catch reference is there to handle

exceptions that are thrown. This gives you an
opportunity to handle them in a graceful
manner.
All rx operations return an observable.

Observable - Subscribe

observerOr PartialObserver<T> | ((value: T)

Next => void)

error (error: any) => void

complete () => void

this.service.getData(10).subscribe(
(data : Post) => {
this.result = data;
},
(error : any) => {
console.error(error);
}
)

By Nathan (Nathane2005) Published 17th October, 2016. Sponsored by Readability-Score.com

cheatography.com/nathane2005/ Last updated 17th October, 2016. Measure your website readability!
Page 3 of 3. https://readability-score.com