javascript - 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) ，它不会记录任何内容。

但是如果我从箭头函数内部编写 console.log(gifs) ，它会打印我想要的对象。

我该怎么办？

Answer 1

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

为了解决这个问题，您应该使用一些响应式数据类型(例如 Promises 或 RxJS)，以便只有在设置后才能获取 this.gifs 的值。