practice session http 관련 질문

[lndoorshoes]

다음은 실습 내용 중의 코드를 그대로 복사해 온 것입니다.

hero.service.ts 중 1.

getHero(id: number): Promise<Hero> { 
   return new Promise(resolve => { 
     this.messageService.add(`HeroService: fetched hero id=${id}`); 
     resolve(HEROES.find(hero => hero.id === id)); 
   }); 
}

2.

getHero(id: number): Promise<Hero> { 
   const url = `${this.heroesUrl}/${id}`; 
   return this.http.get<Hero>(url) 
     .pipe(tap(_ => this.log(`fetched hero id=${id}`))) 
     .toPromise() 
     .catch(this.handleError<Hero>(`getHero id=${id}`)); 
}

Q) hero-detail.component.html에서 1의 코드로는 {{hero.name | uppercase}}와 {{hero.id}}가 정상적으로 출력되지만 2의 코드에서는 {{hero.name | uppercase}}와 {{hero.id}}가 출력되지 않고 공백으로 표시됩니다. 에러 메시지를 찾을 수가 없고 무엇이 원인인지 모르겠어서 질문드립니다.

[ahnjaeshin]

코드는 markdown syntax에 맞춰 올려주시기 바라니다. 해당 내용으로 원인을 판단하기는 어렵습니다.

hero-detail.component.ts에서 console.log(hero) 했을때 어떤 메시지가 뜨나요? Http request는 성공적으로 이루어졌나요?

getHero의 두 구현 모두 어떤 값을 return하는지 알려주시기 바랍니다.

[lndoorshoes]

1. 2의 경우에 console.log(this.hero)가 undefined로 출력됩니다.
2. http request 성공 여부는 어떻게 확인하나요?

[ahnjaeshin]

undefined로 출력이 되는데 {{hero.name | uppercase}}에서 에러가 안 뜨는 것은 이상합니다. .catch(this.handleError<Hero>(getHero id=${id})); 가 불리면 request가 실패했다는 의미입니다.

django server를 돌리면 shell에 어떤 request가 왔는지 log가 남는데 확인 부탁드립니다.