Объект из 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(gif) изнутри функции стрелки, она печатает нужный объект.

Что я делаю?

Answer 1

То, что вы описываете, является состоянием гонки. Функция стрелки внутри .subscribe() является функцией обратного вызова, то есть выполняется после возврата HTTP get. Однако эта функция не блокирует, поэтому остальная часть вашего кода продолжает выполняться. Таким образом, this.gifs может быть не установлен при попытке console.log Это.

Чтобы исправить это, вы должны использовать какой-то реактивный тип данных (например, Promises или RxJS), чтобы вы могли получить значение this.gifs только после того, как это было установлено.