Angular undefined after fetch function

Question

У меня есть следующая функция.

getItems(): any {

    fetch('./assets/data/data.json').then(res => res.json()).then(res => {
      console.log(res);
      return res;
    });

  }

В блоке fetch функция console.log выводит JSON содержимое файла. В другом компоненте:

items: any;

  constructor(private itemService: ItemService) {}

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

    console.log(this.items);
  }

Функция console.log выводит undefined

Answer 1

Потому что вы ничего не возвращаете

// возвращаем Promise

getItems(): Promise<any> {
    return fetch('./assets/data/data.json').then(res => res.json());
}

// т.к. это Promise в then получаем результат

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

Второй вариант использовать конструкцию async/await

БЛОГ НА HUSL

Angular undefined after fetch function

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