Почему локальная переменная не инициализируется с блока subscribe?

Question

getItems(): Observable<Item[]> {
    return this.http.get<Item[]>('./assets/data/data.json');
}

У меня есть код, который возвращает Observable. Ниже другой компонент, в котором вызывается первая функция. Я подписываюсь и получаю данные.

ngOnInit(): void {
    this.itemService.getItems().subscribe(i => this.items = i);

    console.log(this.items);
}

Но когда вызываю ту же функцию в сервисе, где написан метод, при инициализации локальной переменной она остаётся undefined

let items: Item[];
...

    this.getItems().subscribe(i => items = i);

При отладке console.log() в блоке subscribe() данные все есть. В чём проблема? Читал несколько статей, в одной парень расписал всё детально. Но я так и не понял в чём проблема.

Answer 1

Потому что subscribe это асинхронная функция, которая не обязательно вызовется перед console.log (а вероятнее всего, в реальном проекте, после). Надо делать так:

ngOnInit(): void {
    this.itemService.getItems().subscribe(
        i => {
            this.items = i;
            console.log(this.items);
        }
    );    
}

Смысл данной конструкции в том, чтобы сделать запрос данных (например, с сервера) и, не дожидаясь ответа (и не блокируя выполнение кода приложения), продолжить выполнение программы дальше без задержек. Когда данные будут получены вызовется метод subscribe объекта класса Observable

БЛОГ НА HUSL

Почему локальная переменная не инициализируется с блока subscribe?

Ответы (1 шт):