Angular7 Получение данных API перед запуском следующей функции

Question

Я хотел бы получить данные из API перед запуском следующей функции в angular7

'data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  public url = 'https://reqres.in/api/users'
  async getData() {
    await this.http.get(this.url)
    .toPromise()
    .then(
      res => {return res}
    )
  }
}

app.component.ts

  public users
  constructor(private dataservice: DataService) {}

  ngOnInit() {
    this.users = this.dataservice.getData()
    console.log(this.users)
    next_function()
    ....

Фактическая распечатка: ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array (0)} __zone_symbol__state: true

Ожидаемая распечатка: объект json получил

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

Редактировать: Будет ли другой метод, кроме помещения функции next_function внутри getDATA ()?

Answer 1

Что вы можете сделать здесь, это вернуть Observable из вызова http и подписаться на него.

data.service.ts

    getData() {
     return this.http.get(this.url);
    }

app.component.ts

this.dataservice.getData().subscribe(resp => {
   this.users = resp; // here you set the users
   next_function(); // this function will be called after getting data from the service
});

Answer 2

Вам вообще не нужно использовать async / await здесь. Вы уже используете toPromise в getData для преобразования наблюдаемого в обещание. Вы можете просто вернуть это обещание и обработать остальное в компоненте.

getData() {
    return this.http.get(this.url).toPromise();
}

Теперь используйте then в ngOnInit для получения разрешенных / отклоненных данных.

ngOnInit() {
    this.dataservice.getData().then(users => {
        console.log(users);
        next_function();
    }, err => {
        console.log(err);
    });
}

ЭтоКстати, если вы вызываете getData из разных компонентов, вы можете обрабатывать любые ошибки API в этом компоненте. Вы также можете проверить наблюдаемые .

Answer 3

Если вы хотите придерживаться рецепта обещание / асинхронность / ожидание, то вы можете сделать это следующим образом:

// service
getData() {
    return this.http.get(this.url).toPromise();
}

// component
async ngOnInit() {
    this.users = await this.dataservice.getData();
    console.log(this.users);
    next_function();