在AngularSSR服务端渲染模式下使用RxJS超时算子为HTTP请求添加超时机制

AngularUniversal是一个扩展@angular/platform-server功能的开源项目。这个项目在Angular中启用了服务器端渲染。为了在服务器上呈现，Angular使用了node.js的DOM实现——多米诺骨牌。对于每个GET请求，domino创建一个类似的BrowserDocument对象。在该对象上下文中，Angular初始化应用程序，然后向后端发出请求，执行各种异步任务，并将组件的任何更改检测应用到DOM，同时仍在node.js环境中运行。渲染引擎然后将DOM序列化为字符串并将该字符串提供给服务器。服务器发送此HTML作为对GET请求的响应。服务器上的Angular应用程序在渲染后被销毁。AngularUniversal的服务器端呈现最常见的问题之一是当用户打开网站上的页面并看到白屏时。翻译成Web应用领域的术语，就是TimetoFirstByte（简称TTFB）太大了。TTFB是浏览器请求页面和从服务器接收到第一个字节信息之间的时间。在这种情况下，浏览器确实想收到服务器的响应，但是请求以超时结束。在分析这个性能问题之前，有必要了解Zone.js和ApplicationRef.Zone.js是一个允许开发人员跟踪异步操作的工具。在它的帮助下，Angular创建了自己的区域并在其中启动应用程序。更改检测在Angular区域中的每个异步操作结束时触发。ApplicationRef是对正在运行的应用程序（文档）的引用。在此类的所有功能中，我们对ApplicationRef.isStable属性感兴趣。它是一个发出布尔值的Observable。当Angular区域中没有运行异步任务时，isStable为true，当有任何异步任务时，isStable为false。因此，应用程序的稳定性取决于Angular区域中是否存在异步任务。当应用程序的ApplicationRef.isStable第一次变为真时，Angular以当前状态呈现应用程序并清理平台资源。我们现在可以假设用户正在尝试打开无法达到稳定状态的应用程序。setInterval、rxjs.interval或在Angular区域中运行的任何其他递归异步操作，以及HTTP请求，都会阻止Angular应用程序达到稳定状态。我们可以使用rxjs超时运算符强制长时间运行的HTTP请求超时。import{timeout,catchError}from'rxjs/operators';import{of}from'rxjs/observable/of';http.get('').pipe(timeout(2000),catchError(e=>of(null))).subscribe()上面例子的逻辑是，如果HTTP请求在两秒内没有收到服务器的响应，就会进入catchError错误处理模块。这种解决方案的缺点是我们需要为每个HTTP请求手动添加一个超时操作符。更优雅的实现是使用开发包@ngx-ssr/timeout中的NgxSsrTimeoutModule。如果模块被导入到AppServerModule中，那么HTTP请求超时只会在服务端渲染环境下起作用。从'@angular/core'导入{NgModule}；从'@angular/platform-server'导入{ServerModule}；从'./app.module'导入{AppModule}；从'./app.import{AppComponent}。component';import{NgxSsrTimeoutModule}from'@ngx-ssr/timeout';@NgModule({imports:[AppModule,ServerModule,NgxSsrTimeoutModule.forRoot({timeout:500}),],bootstrap:[AppComponent],})export类AppServerModule{}