角度优化：APP_INITIALIZER如何读取在其外部发出的HTTP请求的响应

Question

我正在尝试在Angular站点中进行性能优化，并调用HTTP Request作为Index.html的一部分，以便与正在加载的Angular Javascript应用程序并行获取数据。

HTTP请求完成后，我将设置值'window.appData'。

我想让APP_INITIALIZER等到window.appData设置之后再返回promise。 理想情况下，我希望每隔100毫秒继续轮询以测试window.appData！= null并且一旦设置，则返回true以保留要加载的剩余应用程序。

有时这有效; 如果HTTP请求完成; 但如果http请求未完成。 我希望APP_Initializer继续轮询直到它完成。

任何帮助或建议都会有所帮助。

// Code in Index.html 

fetch(window.config.apiUrl + '/api/v1/resource/GetData')
           .then(function(response) {
             return response.json();
           })
           .then(function(myJson) {
             window.myData = myJson;
}

Answer 1

您可以使用一些共享存储，如local storage ，等待填充数据。

但是，您想要做的事情风险很大，在实施之前应该考虑两次。 这种架构将来会导致许多奇怪的错误。 那些可能很难找到并修复。

一些可能的问题：

1. 如果您的数据请求失败怎么办？ Angular无法启动？
2. 同步（角度/无角度部分）
3. 在未来，您的Angular应用程序可以执行更多操作。 您将通过一个数据请求阻止整个应用程序工作（通过在应用初始化程序中等待）
4. 用户可以在空白页面看什么？ 是否发生了事情或页面被破坏了？ 加载需要多少钱？

您应该考虑的关键问题是：

1. 请求有多大/多长？ 以这种方式优化是否值得？ 怎么了？ 100毫秒，200？ 数据重量多少？
2. 您是否需要APP_INITIALIZER中的数据或仅在同步目的中使用它？
3. 所有应用程序只需要这些数据或某些组件吗？

我鼓励你回到绘图板。

如果您没有特殊情况，则应加载Angular应用程序，然后为用户获取显示微调器或闪屏的数据。

在这种情况下，您可以完全控制，即请求失败，加载器对用户友好。

如果您有一些特殊情况，请描述一下。

Answer 2

感谢Walter的回复。 我确实知道它的含义; 但我希望API在90％的情况下加载Angular应用程序之前完成请求; 我去了以下实施。

initializeApp(): Promise<any> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const siteSettings = window.siteSettings;
        if (siteSettings !== null) {
          resolve();
        } else {
          const subscription = interval(25).subscribe(() => {
            const siteSettings2 = window.siteSettings;
            if (siteSettings2 !== null) {
              subscription.unsubscribe();
              resolve();
            } else {
              // If wait exceeds threshold; fall back to the default flow and load 
              // using angular ajax call 
            }
          });
        }
      }, 0);
    });
  }