GIPHY API의 개체가 아무 것도 인쇄하지 않습니다.

Question

GIPHY API에서 일부 데이터를 가져 오기 위해 각도 2를 사용하고 있습니다.

export class ListaGifsComponent { 
    gifs : Object[] = []; 
    urlBase = "http://api.giphy.com/v1/gifs/search?q="; 
    termoPesquisado = "ryan+gosling"; 
    key = "O8RhkTXfiSPmSCHosPAnhO70pdnHUiWn"; 
    constructor(http: Http){ 
     http 
     .get(this.urlBase + this.termoPesquisado + 
      "&api_key=" + this.key + "&limit=10") 
     .map(res => res.json()) 
     .subscribe(gifs => 
      this.gifs = gifs['data'], 
      erro => console.log(erro) 
     ); 

    } 
} 

console.log (this.gifs)를 기록하면 아무 것도 기록하지 않습니다.

그러나 arrow.log (gifs)를 화살표 함수 내부에서 작성하면 원하는 객체를 인쇄합니다.

어떻게해야합니까?

Answer 1

설명하는 것은 경쟁 조건입니다. .subscribe() 안에있는 화살표 함수는 콜백 함수로, HTTP get이 반환 된 후에 실행됩니다. 그러나이 함수는 비 블로킹이므로 나머지 코드는 계속 실행됩니다. 따라서 console.log을 시도하면 this.gifs이 설정되지 않을 수 있습니다.

이 문제를 해결하려면 this.gifs 값을 얻을 수 있도록 일부 무효 데이터 유형 (예 : 약속 또는 RxJS)을 사용해야합니다.