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返回后执行。但是，此函数是非阻塞的，因此您的其余代码将继续执行。因此，this.gifs当您尝试时可能不会设置console.log它。

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