Http调用在角度通用中进行了两次

Question

Http调用在初始加载时在angular Universal中进行了两次，我尝试应用传输状态并在我的项目中完成缓存机制，仍然没有任何反应。

if (isPlatformBrowser(this.platformId)) {
 return this.http.get(baseApi + '/blog/slug/' + blogId);
} else {
  const store = this.state.get(MY_DATA, null);
  if (store) {
    return store;
  }
  const myData = this.http.get(baseApi + '/blog/slug/' + blogId);
  this.state.set(MY_DATA, myData);
  return myData;
}

网络通话截图

我是否遗漏了什么，或者有什么我必须包含的内容以避免浏览器调用？提前致谢。

Answer 1

如果您的条件得到验证，它将执行查询

if (isPlatformBrowser(this.platformId)) {
  return this.http.get(baseApi + '/blog/slug/' + blogId);
 } 

在相反的情况下，它进入else 一个除了

const myData = this.http.get(baseApi + '/blog/slug/' + blogId);
  this.state.set(MY_DATA, myData);
  return myData;

始终执行，无论执行的测试如何。

Answer 2

就像我在评论中所说，您只能通过状态传输缓存数据。从您的代码来看，您似乎正在尝试缓存一个可观察对象。而你的第一个if是错误的，这意味着你总是会在客户端进行http调用

为了避免调用两次，你可以使用类似下面的代码，这也将防止调用两次服务器端

//Check if cached version exists
const data = this.state.get(MY_DATA, null);
if (data) 
{
    return of(data); //data exists
}

//Data has not been cached yet. Make the call and store result

return this.http.get(baseApi + '/blog/slug/' + blogId)
.pipe(tap(res=> {this.state.set(MY_DATA, res);} );

您还可以使用更多 TransferStateHttpCacheModule，它提供了一个通用拦截器来处理您的所有请求

Answer 3

通过安装preboot解决了这个问题，遇到同样问题的朋友可以参考一下： 我们需要等待完整的客户端应用程序使用 preboot 等库引导并运行或缓冲事件。

npm i preboot

在 app.module.ts 的导入下添加以下代码

PrebootModule.withConfig({ appRoot: 'app-root' })

如有必要，还将以下代码添加到 app.module.ts 中的提供程序，

{
provide: APP_INITIALIZER,
  useFactory: function(document: HTMLDocument, platformId: Object): Function {
    return () => {
      if (isPlatformBrowser(platformId)) {
        const dom = ɵgetDOM();
        const styles: any[] = Array.prototype.slice.apply(dom.querySelectorAll(document, `style[ng-transition]`));
        styles.forEach(el => {
          // Remove ng-transition attribute to prevent Angular appInitializerFactory
          // to remove server styles before preboot complete
          el.removeAttribute('ng-transition');
        });
        document.addEventListener('PrebootComplete', () => {
          // After preboot complete, remove the server scripts
          setTimeout(() => styles.forEach(el => dom.remove(el)));
        });
      }
    };
  },
  deps: [DOCUMENT, PLATFORM_ID],
  multi: true  
}

添加这些之后，对我来说，闪烁问题得到了解决。

请参阅官方 angular ssr 链接以获得更清晰的信息：https://angular.io/guide/universal