在Angular中解析外部异步函数时未定义的数据

Question

当我想解析来自 http 调用的数据并将其解析为 ngOnInit 时，我遇到了困难。你能帮我解决这个问题吗？我正在使用 Angular 4。

异步函数：

async getAsyncData() {
      this.asyncResult = await this.serviceDashboard.getAllGeografika().toPromise().then(data => {
        return data.length;
      });
      return this.asyncResult;
}

ngOnInit 我要打印数据的地方：

ngOnInit() {
      console.log('Halo from ngOnInit');
      console.log('print data :' +  this.getAsyncData();
}

Answer 1

你不是在等待你的函数的承诺，所以这个：

 console.log('print data :' +  this.getAsyncData();

正在记录承诺，而不是承诺的已解决值

您至少可以通过三种方式解决此问题：

1。使用异步/等待

async ngOnInit() {
  console.log('Halo from ngOnInit');
  const data = await this.getAsyncData();
  console.log('print data :' + data);
}

async getAsyncData() {
  const data = await this.serviceDashboard.getAllGeografika().toPromise();
  return data.length;
}

这种违反了OnInit的合同，但你可以逃脱惩罚。

2。兑现承诺

这可能是比上一个更纯粹的形式，但你可能不喜欢它的冗长。

ngOnInit() {
  console.log('Halo from ngOnInit');
  this.getAsyncData().then(data => {
      console.log('print data :' + data);
  });
}

async getAsyncData() {
  const data = await this.serviceDashboard.getAllGeografika().toPromise();
  return data.length;
}

3。使用 RxJS

我的首选。

ngOnInit() {
  console.log('Halo from ngOnInit');
  this.getAsyncData().subscribe(data => {
      console.log('print data :' +  data.length);
  });
}

getAsyncData(): Observable<any> {
  return this.serviceDashboard.getAllGeografika();
}