Angular7在运行下一个函数之前接收API数据

我想在angular7中运行下一个函数之前从API接收数据

'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{{uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu状态：null，{uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu __区域符号状态：真

预期打印输出： 接收到的json对象

在用html显示数据之前，我想运行一些函数来处理数据，所以我需要在类中加载数据

编辑：

---

除了将下一个函数放在getDATA中之外，还有其他方法吗？

这里可以做的是从http调用返回可观察对象并订阅它

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()
    ....

---

如果你想坚持承诺/异步/等待的方法，那么你可以这样做：

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

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

这里根本不需要使用async/wait。您已经在getData中使用toPromise来将可观察到的内容转换为承诺。您只需返回此承诺，并在组件中处理其余部分

获取数据{ 返回this.http.getthis.url.toPromise； } 现在在ngOnInit中使用then来获取已解析/拒绝的数据

恩戈尼特{ this.dataservice.getData.thenusers=>{ console.logusers； 下一个函数； }，err=>{ console.logerr； }; }

---

这样，如果从不同的组件调用getData，就可以处理该组件中的任何API错误。您可能还想签出。

使函数异步只意味着它总是返回一个承诺，您可以在其中使用wait。它不会神奇地让它的调用者同步接收值，他们仍然需要解决承诺。