Angular SSR 渲染超时处理：使用 RouteResolver 实现快速/慢速 API 降级

首先，我们利用 setTimeout 函数模拟一个耗时 5 秒的 API 接口调用。

const express = require('express');
const app = express();
app.get('/api/fast', (req, res) => {
  console.log('fast endpoint hit');
  res.send({response: 'fast'});
});
app.get('/api/slow', (req, res) => {
  setTimeout(() => {
      console.log('slow endpoint hit');
      res.send({response: 'slow'});
  }, 5000);
});
app.listen(8081, () => {
  console.log('Listening');
});

接着，创建一个 Angular 服务（Service），用于封装对该 /api/slow 接口的请求逻辑。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
 providedIn: 'root'
})
export class CustomService {
 constructor(private http: HttpClient) {}
 public getFast(): Observable<any> {
   return this.http.get<any>('http://localhost:8081/api/fast');
 }
 public getSlow(): Observable<any> {
   return this.http.get<any>('http://localhost:8081/api/slow');
 }
}

在服务器端渲染（SSR）场景下，等待该 API 返回至少需要 5 秒。为避免阻塞渲染，我们需要为此 API 调用设置超时机制。若 SSR 期间超过设定的时间阈值仍未收到响应，则放弃服务端渲染，转而由客户端继续完成渲染。

实现该逻辑的核心工具是 Angular 的路由解析器（RouteResolver）。

从 Angular 路由模块中导入 router 相关接口。

import { Resolve } from '@angular/router';

从 Angular 通用模块（common）中导入用于检测当前运行平台（浏览器或服务端）的 API。

import { isPlatformBrowser } from '@angular/common';

定义一个 Injection Token，用于注入当前应用的平台 ID（platform id）。

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';

新建一个服务类，用于处理解析逻辑。

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable, timer } from 'rxjs';
import { isPlatformBrowser } from '@angular/common';
import { CustomService } from './custom.service';
import { takeUntil } from 'rxjs/operators';
@Injectable({
 providedIn: 'root'
})
export class SlowComponentResolverService implements Resolve<any> {
 constructor(private service: CustomService, @Inject(PLATFORM_ID) private platformId: any) { }
 public resolve(): Observable<any> {
   if (isPlatformBrowser(this.platformId)) {
     return this.service.getSlow();
   }

当应用运行在浏览器端时，isPlatformBrowser(this.platformId) 判断结果为 true，此时直接调用慢速 API 即可。

若不在浏览器端，则创建一个 Observable，使其在 500 毫秒后发射一个值。

const watchdog: Observable<number> = timer(500);

将该 watchdog Observable 通过 pipe 操作符链式连接到 this.service.getSlow 的输出流中。这样，如果 this.service.getSlow() 在 500 毫秒内未发出值，watchdog 将向组件推送 null 值；否则，API 的真实响应会正常推送给组件。

Angular SSR 渲染超时处理：使用 RouteResolver 实现快速/慢速 API 降级

我们需要更新应用的路由配置，以使用此解析器。

为 slowComponent 分配对应的 resolver。

const routes: Routes = [
{path: '', redirectTo: 'fast', pathMatch: 'full'},
{path: 'fast', component: FastComponent},
{path: 'slow', component: SlowComponent, resolve: {response: SlowComponentResolverService}}
];

在 slowComponent 的实现中，从分配的路由解析器结果中读取 API 响应数据。

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-slow',
template: `
  <p>
    Response is: {{response | json}}
  </p>
`,
styles: []
})
export class SlowComponent {

public response: any = this.router.snapshot.data.response;
constructor(private router: ActivatedRoute) {}
}

注意，此处并非直接访问 Route Resolver 对象，而是通过 this.router.snapshot.data.response 获取数据。

当 API 在 500 毫秒内成功返回时，slowComponent 的所有源代码均由服务器端生成并渲染。

Angular SSR 渲染超时处理：使用 RouteResolver 实现快速/慢速 API 降级

若 API 在 500 毫秒内未能返回数据，则客户端会重新调用该 API，并在客户端完成最终的渲染过程。

Angular SSR 渲染超时处理：使用 RouteResolver 实现快速/慢速 API 降级

至此，关于 Angular 服务器端渲染应用中设置渲染超时时间的方案介绍完毕。更多相关技术内容请参阅本站其他文章。

Angular SSR 渲染超时处理：使用 RouteResolver 实现快速/慢速 API 降级

Angular SSR 渲染超时处理：使用 RouteResolver 实现快速/慢速 API 降级

实用工具推荐