TS / JS - асинхронная функция работает не так, как ожидалось

Question

Я не знаю, стал ли я глупым или как, но у меня большая проблема с этим маленьким методом.

  async fetchContacts() {


    await this.http.get('http://localhost:3000/contacts')
    .subscribe(res => {
      const newContacts = [].concat(res);
      this.contacts = newContacts;
      console.log(this.contacts);
    });

    console.log(this.contacts);

  }

Ожидаемый результат:

second console.log должен вызываться после first и возвращать то же значение, что и first

Текущий результат:

второй console.log вызывается раньше всех остальных.

Как это исправить? Заранее спасибо.

Answer 1

Вы не можете напрямую использовать await с Observable.Если вы хотите использовать async/await, вы можете использовать toPromise оператор

import { toPromise } from 'rxjs/operators';

async fetchContacts() {
  this.contacts = await this.http.get('http://localhost:3000/contacts').toPromise()

  ...
}