angular - Angular 9做同步调用，在做任何其他事情之前等待

Question

我有一个 Angular 9 应用程序，我想要的是当有人访问我的网站时，我会进行同步休息端点调用，并使用接收数据将数据填充到不同的组件中，例如颜色和货币类型。如果没有这些信息，组件将不会产生正确的格式或颜色。

现在我有一个服务可以从中获取主机名window.location.hostname，然后我进行后端调用。我在网上看到你可以做一个async和await组合来使其余调用同步。await效果很好，但是这async部分是一场灾难。我这么说的原因是这会导致网站的其余部分包括组件在内的构建。这意味着组件缺少它们应该从服务中获取的信息，因为它们在服务仍在进行其余调用时继续加载/构建。

我需要一种在 Angular 中进行同步调用的方法，并让整个网站在下载该信息之前等待。我可以这样做吗？

标签： angularsynchronization

Answer 1

考虑到浏览器 API 异步处理所有 ajax 和资产 http 调用，我认为这是不可能的，这不能从我所知道的情况中改变。另外，我不认为 async / await 会起作用，因为它们只是promise api的语法糖。你能试试这种方法吗？

• https://github.com/angular/angular/issues/9047#issuecomment-224075188
• https://dzone.com/articles/how-to-use-the-app-initializer-token-to-hook-into 我建议将其添加到 app.module 中的 providers[] 中，如第二个链接：

   {
      provide: APP_INITIALIZER,
      useFactory: appInitializer,
      deps: [SomeService, ], // in case you need any dependencies
      multi: true,
    },