Angular SSR 应用里的 HTTP timeout 研究

源代码：

export const defaultBackendHttpTimeoutConfig: OccConfig = {
  backend: {
    timeout: {
      server: 20_000,
    },
  },
};

通过 HTTP interceptor 来完成：

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useExisting: S4HttpTimeoutInterceptor,
      multi: true,
    },
    DefaultConfigInjected(defaultBackendHttpTimeoutConfig),
  ],
})
export class HttpTimeoutModule {}

使用 HTTPInterceptor 可以实现 HTTP 请求超时机制的控制。

HttpInterceptor 是 Angular 框架中用于拦截和处理 HTTP 请求和响应的机制。它的存在是为了增强应用的 HTTP 客户端，即 HttpClient，使得我们可以在数据的请求和传输的生命周期中进行操作，进而实现各种目的，例如修改请求头、处理错误、统一处理身份认证、记录日志等。简单来说，HttpInterceptor 允许开发者在 HTTP 请求和响应进入应用前做某种处理，或者在请求从服务器到达客户端之前做某种操作。它的主要作用是在后台为每一个 HTTP 请求提供某种形式的拦截和管理逻辑，保证应用行为的一致性和扩展性。

HttpInterceptor 在 Angular 的依赖注入系统中被设计为可插拔的、可组合的方式，通过创建并注入多个拦截器，开发者可以将不同的业务逻辑分离到不同的拦截器中。这样不仅提高了代码的复用性和可维护性，而且让代码更加干净和易读。

HttpInterceptor 的工作方式基于 Angular 的 HttpClient 服务。每当 HttpClient 发起一个 HTTP 请求时，所有的拦截器会按照注册的顺序依次执行，处理每个请求并继续向下传递。拦截器是链式调用的，这意味着每个拦截器都会获得当前请求的快照并对其进行操作，然后将其传递给下一个拦截器。每个拦截器都有权对请求和响应进行修改，但它不能中断整个拦截器链。

每个拦截器都必须实现 HttpInterceptor 接口，该接口只有一个方法 intercept(req: HttpRequest<any>, next: HttpHandler)。

intercept 方法接收两个参数：

• req: HttpRequest<any>：表示即将发送的 HTTP 请求。

• next: HttpHandler：表示 HTTP 请求链中下一个处理程序。

HttpHandler 是一个具有 handle 方法的对象，它负责将修改过的 HttpRequest 实例传递给下一个处理程序，最终到达服务器端。

在拦截器中，开发者可以选择返回修改后的 HttpRequest 或是 HttpResponse，或者是 Observable 类型的其他内容，这使得拦截器的功能非常灵活。Angular 内部采用了 RxJS（响应式扩展库）来管理 HTTP 请求的流，这让我们可以用强大的操作符来操作数据流，实现异步处理等功能。