angular - Angular `ngOnInit` 中的异步/等待

Question

我目前正在评估替换 Angular 的利弊。 RxJS 的 Observable 带有简单的 Promise，这样我就可以使用 async 和 await 并获得更直观的代码风格。

我们的典型场景之一:在 ngOnInit 中加载一些数据。使用 Observables，我们可以:

ngOnInit () {
  this.service.getData().subscribe(data => {
    this.data = this.modifyMyData(data);
  });
}

当我从 getData() 返回一个 Promise 并使用 async 和 await 时，它变成了:

async ngOnInit () {
  const data = await this.service.getData();
  this.data = this.modifyMyData(data);
}

现在，很明显，Angular 不会“知道”ngOnInit 已经变成了async。我觉得这不是问题:我的应用程序仍然像以前一样工作。但是当我查看 OnInit 接口(interface)时，该函数显然没有以这样的方式声明，这表明它可以被声明为 async:

ngOnInit(): void;

所以——底线:我在这里做的事情合理吗？或者我会遇到任何不可预见的问题吗？

Answer 1

这和你以前的没什么不同。 ngOnInit 将返回一个 Promise，调用者将忽略该 promise。这意味着调用者不会等待您的方法中的所有内容都完成后再继续。在这种特定情况下，这意味着 View 将完成配置，并且可以在设置 this.data 之前启动 View 。

这与您之前遇到的情况相同。来电者不会等待您的订阅完成，并且可能会在填充 this.data 之前启动应用程序。如果您的 View 依赖于 data，那么您可能有某种 ngIf 设置来阻止您访问它。

只要您了解其中的含义，我个人并不认为这是一种尴尬或不好的做法。然而，ngIf 可能很乏味(无论哪种方式都需要它们)。我个人已经转向在有意义的地方使用路由解析器，这样我就可以避免这种情况。数据在路线完成导航之前加载，我可以在 View 加载之前知道数据可用。