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/await

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();
}

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

Undefined data when parsing outside async function in Angular

javascript

angular

async-await

dom-events

angular-promise

1。使用 async/await

2。解决承诺

3。使用 RxJS