Angular 4 Async HTTP client in typescript with promises, interceptors, and timeouts. Note: Production Ready! (Well tested)
npm install angular-async-http --saveimport{Http,Request,Response}from'@angular/http';import{Observable}from'rxjs/Observable';import{HttpClient,RestClient,Client,GET,PUT,POST,DELETE,Headers,Path,Body,Query,Produces,MediaType}from'angular-async-http';import{Todo}from'./models/Todo';import{SessionFactory}from'./sessionFactory';
@Injectable()
@Client({serviceId: 'todo-service',baseUrl: 'http://localhost:3000/api/',headers: {'content-type': 'application/json'}})exportclassTodoClientextendsRestClient{constructor(http:Http){super(<HttpClient>http);}protectedrequestInterceptor(req: Request):void{if(SessionFactory.getInstance().isAuthenticated){req.headers.append('jwt',SessionFactory.getInstance().credentials.jwt);}}protectedresponseInterceptor(res: Observable<Response>): Observable<any>{// do anything with responsesreturnres;}
@Get("todo/")
@Timeout(2000)//In milliseconds
@Produces(MediaType.JSON)publicgetTodos( @Query("page")page:number, @Query("size",{default: 20})size?:number, @Query("sort")sort?: string): Observable<Todo[]>{returnnull;};
@Get("todo/{id}")
@Timeout(2000)//In milliseconds
@Map(resp=>newTodo(resp.json()))publicgetTodoById( @Path("id")id: number): Observable<Todo>{returnnull;};
@Post("todo")
@Timeout(2000)//In milliseconds
@Headers({'content-type': 'application/json'})publicpostTodo( @Bodytodo: Todo): Observable<Response>{returnnull;};
@Put("todo/{id}")
@Timeout(2000)//In millisecondspublicputTodoById( @Path("id")id: string, @Bodytodo: Todo): Observable<Response>{returnnull;};
@Delete("todo/{id}")
@Timeout(2000)//In millisecondspublicdeleteTodoById( @Path("id")id: string): Observable<Response>{returnnull;};}app.module.ts
@NgModule({declarations: [AppComponent],imports: [HttpModule],providers: [TodoClient],bootstrap: [AppComponent]})exportclassAppModule{}todo.component.ts
// You need some or all of the following rxjs imports for Promise and Observable.import'rxjs/add/observable/defer';import'rxjs/add/observable/throw';import'rxjs/add/operator/map';import'rxjs/add/operator/timeout';import'rxjs/add/operator/toPromise';import{Observable}from'rxjs/Observable';
@Component({selector: 'to-do',})exportclassToDoCmp{constructor(privatetodoClient: TodoClient){}// Use todoClient.sampleUsage(){this.todoClient.getTodos(/* page */1).subscribe(data=>{console.log(data)})}// Another example, using Promises.sampleUsage2(){this.todoClient.getTodos(/* page */1).toPromise().then((response: Response)=>console.log(response.json())).catch(this.handleError);})}privatehandleError(error: any): Promise<any>{
console.error('An error occurred',error);console.log('ERROR');returnPromise.reject(error.message||error);}}getServiceId(): string: returns the serviceId of the RestClientgetBaseUrl(): string: returns the base url of RestClientgetDefaultHeaders(): Object: returns the default headers of RestClient in a key-value pair
@Client(args:{serviceId?: string, baseUrl?: string, headers?: any})
@Get(url: String)@Post(url: String)@Put(url: String)@Patch(url: String)@Delete(url: String)@Head(url: String)@Headers(headers: Object)@Map(mapper:(resp : any)=>any)@OnEmit(emitter:(resp : Observable<any>)=>Observable<any>)@Timeout(timeout: number)
@Path(name: string, value?:any|{value?:any})@Query(name: string, value?:any|{value?:any,format?:string})@Header(name: string, value?:any|{value?:any,format?:string})@Body
Determines the format of the array if type array is used. (used for @Query and @Header) Possible values are:
Format.CSV- comma separated valuesfoo,bar.Format.SSV- space separated valuesfoo bar.Format.TSV- tab separated valuesfoo\tbar.Format.PIPES- pipe separated valuesfoo|bar.Format.MULTI- corresponds to multiple parameter instances instead of multiple values for a single instancefoo=bar&foo=baz. This is valid only for parameters in "query" or "formData".
Default value is Format.CSV.
Brought to you by many contributors, including:
TrustPortal Solutions Ltd http://trustportal.org
Yavin Five
deblockt
Dmitry-Gorbenko
Maxxton Group http://www.maxxton.com
Domonkos Pal : Paldom
Discountrobot
TN-Kirontech
LeFinc
mmrath http://www.mmrath.com
steven166
Mayur Patel : mayur-novus
MIT