来自GIPHY API的对象不打印任何内容

Question

我使用angular 2从GIPHY API获取一些数据。

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函数中编写console.log（gifs），它会打印出我想要的对象。

我该怎么办？

Answer 1

你所描述的是竞争条件。 .subscribe()内的箭头函数是一个回调函数，这意味着它在HTTP get返回后执行。但是，此函数是非阻塞的，因此其余代码将继续执行。因此，当您尝试this.gifs时，可能无法设置console.log。

要解决此问题，您应该使用一些反应数据类型（如Promises或RxJS），这样您只有在设置后才能获得this.gifs的值。