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/

相关文章:

python - Tornado 发生器在列表中的任何 future 恢复

c++ - 对象级 CSingleLock 与方法级 CSingleLock

angular - 测试 npm 是否通过 visual studio 2015 的代理连接

node.js - 如何将 ThreeJS Collada 加载器与 TypeScript/Angular CLI 一起使用?

angular - 如何处理组件中的异步输入?

javascript - 如何创建一个包含另一个 Angular Cli 的 Angular Cli 应用程序?

angular - 从 Angular HttpInterceptor 调用 Promise

typescript - 条件可选参数类型

javascript - 使用索引作为键初始化对象数组

Android长轮询-执行服务超时