来自 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) ，它什么都不记录。

但是如果我从箭头函数内部写入 [=20=](gifs)，它会打印出我想要的对象。

我该怎么办？

Answer 1

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

为了补救这个问题，你应该使用一些响应式数据类型（比如 Promises 或 RxJS），这样你就可以在 this.gifs 被设置后获取它的值。

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

Object from GIPHY API prints nothing

javascript

api

typescript

giphy

angular