앵귤러/01 퀵스타트 & 튜토리얼

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

linor 2017. 8. 9. 09:07

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);

}

 

저작자표시 비영리 변경금지 (새창열림)