X-Git-Url: https://juplo.de/gitweb/?a=blobdiff_plain;f=src%2Fapp%2Fhero.service.ts;h=6df713db1826ca67060f377bc78cd97e373fd973;hb=3efe152e8e2be6f2dc172cf1ac476e2cb01be54b;hp=8df8f33af31d49fc5afa8f07ffe10b12a05e8b70;hpb=3daace5a71b0be19e05b74de9cf7530ce6aa92c3;p=examples%2Fangular-tour-of-heroes diff --git a/src/app/hero.service.ts b/src/app/hero.service.ts index 8df8f33..6df713d 100644 --- a/src/app/hero.service.ts +++ b/src/app/hero.service.ts @@ -1,8 +1,10 @@ import { Injectable } from '@angular/core'; -import { Observable, of } from 'rxjs'; +import { Observable, of, EMPTY } from 'rxjs'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; import { MessageService } from './message.service'; +import { catchError, tap } from 'rxjs/operators'; @Injectable({ @@ -10,10 +12,69 @@ import { MessageService } from './message.service'; }) export class HeroService { - constructor(private messageService : MessageService) { } + heroesUrl = 'api/heroes'; // URL to web api + httpOptions = { + headers: new HttpHeaders({ 'Content-Type': 'application/json' }) + }; - getHeroes() : Observable { - this.messageService.add('HeroService: fetching heroes...'); - return of(HEROES); + constructor( + private http: HttpClient, + private messageService: MessageService) { } + + getHeroes(): Observable { + this.log('fetching heroes...'); + return this.http + .get(this.heroesUrl) + .pipe( + tap((heroes: Hero[]) => this.log(`fetched ${heroes.length} heroes`)), + catchError(this.handleError('getHeroes', [])) + ); + } + + /** GET hero by id. Will 404 if id not found */ + getHero(id: number): Observable { + this.log(`requested hero id=${id}`); + const url = `${this.heroesUrl}/${id}`; + return this.http.get(url).pipe( + tap(_ => this.log(`fetched hero id=${id}`)), + catchError(this.handleError(`getHero id=${id}`)) + ); + } + + /** PUT: update the hero on the server */ + updateHero(hero: Hero): Observable { + return this.http.put(this.heroesUrl, hero, this.httpOptions).pipe( + tap(_ => this.log(`updated hero id=${hero.id}`)), + catchError(this.handleError('updateHero')) + ); + } + + /** + * Handle Http operation that failed. + * Let the app continue. + * @param operation - name of the operation that failed + * @param result - optional value to return as the observable result + */ + private handleError(operation = 'operation', result?: T) { + return (error: any): Observable => { + + // TODO: send the error to remote logging infrastructure + console.error(error); // log to console instead + + // TODO: better job of transforming error for user consumption + this.log(`${operation} failed: ${error.message}`); + + // Let the app keep running by returning an empty result. + if (result === undefined) { + return EMPTY as Observable; + } else { + return of(result as T); + } + }; + } + + /** Log a HeroService message with the MessageService */ + private log(message: string) { + this.messageService.add(`HeroService: ${message}`); } }