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

标签 angular typescript asynchronous promise observable

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

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

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

当我从 getData() 返回一个 Promise 并使用 asyncawait 时,它变成了:

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/

相关文章:

javascript - 从 Angular 5 升级到 Angular 8,SystemJS 出现问题

arrays - Angular2 从 JSON 数组中删除重复项

node.js - Firebase Angular 4 基于 Node 环境初始化

javascript - 检查 typescript 中是否存在图像

c# - Silverlight 中的异步套接字连接

Angular2 @输入: Passing an objects array from parent to child component

angular - 如何对作为 viewchild 的函数进行单元测试

javascript - ts-jest 无法解析 tsconfig 别名

C# 多个任务在调用行上被阻止

node.js - Mongoose 异步调用另一个模型使验证变得不可能