我目前正在评估替换 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;
所以——底线:我在这里做的事情合理吗?或者我会遇到任何不可预见的问题吗?
最佳答案
这和你以前的没什么不同。 ngOnInit
将返回一个 Promise,调用者将忽略该 promise。这意味着调用者不会等待您的方法中的所有内容都完成后再继续。在这种特定情况下,这意味着 View 将完成配置,并且可以在设置 this.data
之前启动 View 。
这与您之前遇到的情况相同。来电者不会等待您的订阅完成,并且可能会在填充 this.data
之前启动应用程序。如果您的 View 依赖于 data
,那么您可能有某种 ngIf
设置来阻止您访问它。
只要您了解其中的含义,我个人并不认为这是一种尴尬或不好的做法。然而,ngIf
可能很乏味(无论哪种方式都需要它们)。我个人已经转向在有意义的地方使用路由解析器,这样我就可以避免这种情况。数据在路线完成导航之前加载,我可以在 View 加载之前知道数据可用。
关于angular - Angular `ngOnInit` 中的异步/等待,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56092083/