2-12 HttpClient Promise를 사용하여 영웅목록 가져오기

HttpClient Promise를 사용하여 영웅목록 가져오기

 

지금까지 만든 앱을 개선해보자

l  서버에서 영웅 데이터 가져오기

l  영웅 추가, 편집, 삭제

l  변경사항 서버에 저장

 

http서비스를 사용하려면 @angular/common/http라이브러리에서 HttpClientModule을 임포트해야 한다.

src/app/app.module.ts

import { NgModule }       from '@angular/core'; import { BrowserModule }  from '@angular/platform-browser'; import { FormsModule }    from '@angular/forms'; //import { HttpModule }     from '@angular/http'; import { HttpClientModule } from '@angular/common/http';   import { AppComponent }         from './app.component'; import { DashboardComponent }   from './dashboard.component'; import { HeroDetailComponent }  from './hero-detail.component'; import { HeroesComponent }      from './heroes.component'; import { HeroService }          from './hero.service';   import { AppRoutingModule }     from './app-routing.module';   @NgModule({   imports: [     BrowserModule,     FormsModule,     //HttpModule,     HttpClientModule,     AppRoutingModule   ],   declarations: [     AppComponent,     DashboardComponent,     HeroDetailComponent,     HeroesComponent   ],   providers: [ HeroService ],   bootstrap: [ AppComponent ] }) export class AppModule { }

 

getHeroes()메소드를 Http를 사용하여 수정한다.

src/app/hero.service.ts

import { Injectable } from '@angular/core'; import { HttpClient }       from '@angular/common/http'; import 'rxjs/add/operator/toPromise';   import { Hero } from './hero'; import { HEROES } from './mock-heroes';   @Injectable() export class HeroService {   private heroesUrl = 'http://localhost:3000/heroes';     constructor(private http:HttpClient){}     getHeroes(): Promise<Hero[]> {     return this.http.get(this.heroesUrl)         .toPromise()         .then(response => response as Hero[])         .catch(this.handleError);   }     getHero(id:number):Promise<Hero>{     return this.getHeroes()       .then(heroes => heroes.find(hero => hero.id === id));   }     private handleError(error: any): Promise<any> {     return Promise.reject(error.message || error);   } }

 

앵귤러 http.get메소드는 RxJS Observable을 리턴한다. Observable타입을 이용하여 처리할 수도 있지만 여기서는 Promise로 변환하여 사용하기 위해 toPromise()메소드로 Promise타입으로 변환하였다.

toPromise를 사용하기 위해 rxjs라이브러리를 임포트 한다.

import 'rxjs/add/operator/toPromise';

 

Promise의 then콜백함수를 이용하여 Reponse에서 데이터를 추출한다.

.then(response => response as Hero[])

 

에러 처리를 위해 catch메소드에 에러를 처리할 메소드를 등록한다.

.catch(this.handleError);

 

실제 에러 처리 메소드

private handleError(error: any): Promise<any> {   console.error('An error occurred', error); // for demo purposes only   return Promise.reject(error.message || error); }