来自GIPHY的

Question

我使用角2从GIPHY获得一些数据。

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)，它会打印我想要的对象。

我做什么好？

Answer 1

你所描述的是一种种族状况。.subscribe()内部的箭头函数是一个回调函数，这意味着它是在HTTP返回之后执行的。然而，这个函数是非阻塞的，所以您的代码的其余部分继续执行。因此，在尝试将this.gifs设置为console.log时，可能不会设置它。

为了弥补这一点，您应该使用一些反应性数据类型(比如承诺或RxJS)，以便只有在设置了this.gifs之后才能得到它的值。