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）を書き込むと、何も記録されません。

しかし、私がconsole.log（gifs）をarrow関数の中から書くと、私は必要なオブジェクトを出力します。

私は何をしますか？

Answer 1

説明しているのは、競合状態です。 .subscribe()の矢印関数はコールバック関数であり、HTTP getが返った後に実行されることを意味します。ただし、この関数はノンブロッキングなので、残りのコードは引き続き実行されます。したがって、this.gifsは、console.logにしようとすると設定されないことがあります。

これを解決するには、this.gifsの値が設定された後にのみ取得できるように、何らかの反応データ型（PromisesまたはRxJSなど）を使用する必要があります。