来自 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 后才能获取它的值。