инициализация данных из API с использованием асинхронной функции

Question

Я изучаю Ionic / Angular для моего первого приложения. Я должен загрузить данные из API в init и отобразить их в моем виде.

В моем коде я вызываю асинхронную функцию, которая содержит вызов API для ngOnInit(). Я хотел бы инициализировать данные из определенного параметра.

Проблема в том, что когда вызывается ngOnInit(), асинхронная функция еще не завершена, поэтому мои переменные в поле зрения null.

Как я мог это сделать?

Вот код:

async getData(id) {
    try {
      const url = 'http://url/api/pages/'+id;
      const params = {};
      const headers = {};
      const response = await this.http.get(url, params, headers);

      console.log(JSON.parse(response.data)); 
      this.page = JSON.parse(response.data);

    } catch (error) {
      console.error(error.status);
      console.error(error.error); 
      console.error(error.headers);
    }
  }

  ngOnInit() {
    this.getData(11);
  }

И представление со страницей var:

<p>{{ page.text }}</p>

Answer 1

Что касается извлечения данных, вы можете:

• сохранить пару async / await , преобразовав результат this.http.get в Promise вот так: const response = await this.http.get(url, params, headers).toPromise();
• или не используйте пару async / await и подпишитесь на Observable , возвращаемую http.get, вот так: this.http.get(url, params, headers).subscribe((response) => this.page = response.data);

Итак, это может быть:

async getData(id) {
    // ...
      const response = await this.http.get(url, params, headers).toPromise();
      this.page = JSON.parse(response.data);
    // ...
}

или ...

getData(id) {
    // ...
      this.http.get(url, params, headers).subscribe((response) => {
           this.page = response.data
      });
    // ...
}

---

Относительно рендеринга вида:

Вариант 1: *ngIf в любом из его вариантов.

т.е.: если вы хотите показать временный текст, указывающий, что значение загружается:

<p *ngIf="!!page; else elseBlock">{{ page.text }}</p>
<ng-template #elseBlock>Loading data...</ng-template>

Вариант 2: Оператор безопасной навигации (?) . Если при загрузке page допустимо показывать пустое значение, вы можете сделать это следующим образом:

<p>{{ page?.text }}</p>

В обоих случаях, после того как page получит значения из API, представление HTML будетобновляться в рамках.