Angular HTTP API缓存实现：路由跳转返回不重复发起请求

你当前写法中shareReplay(1)不生效的核心原因是：每次组件调用ObtenerOrdenxOperario方法时，都会重新执行方法内部逻辑，生成一个全新的HttpClient请求Observable，再给这个全新的流套一层shareReplay。相当于每次组件订阅的都是完全独立的新流，之前的响应缓存根本没有复用机会，所以每次路由返回页面都会触发新的HTTP请求。
另外你贴的服务代码里请求URL被意外折行，拼接时会带入多余空白字符，容易引发接口404问题，写代码时需要注意把路径拼接完整。

要实现首次调用拉取数据、后续复用缓存的效果，必须保证所有调用方拿到的是同一个带缓存能力的流实例，而不是每次调用方法都新建流。

1. 改造服务层代码 #

在服务内单独声明缓存变量存储已经创建好的请求流，第一次调用时初始化带缓存的流并存入变量，后续调用直接返回已有缓存：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable, shareReplay } from 'rxjs';

@Injectable({
  providedIn: 'root' // 必须保证服务是根注入的单例，不要在组件级重复提供
})
export class AuthService {
  // 缓存订单请求流
  private ordenesOperarioCache$: Observable<any> | null = null;

  ObtenerOrdenxOperario(idusuario, where): Observable<any> {
    // 缓存存在时直接返回，不发起新请求
    if (this.ordenesOperarioCache$) {
      return this.ordenesOperarioCache$;
    }

    const params = new HttpParams().set("IdUsuario", idusuario).set("Where", where);
    const headers = new HttpHeaders().set('Content-Type', 'application/json');
    
    // 首次调用时创建请求流，配置缓存后存入变量
    this.ordenesOperarioCache$ = this.httpclient.get(
      `${environment.urlColector}/obtenerOrdenxOperario`,
      { headers, params }
    ).pipe(
      shareReplay(1)
    );

    return this.ordenesOperarioCache$;
  }

  // 可选：新增清空缓存方法，需要手动刷新订单数据时调用即可
  clearOrdenesCache(): void {
    this.ordenesOperarioCache$ = null;
  }
}

2. 适配多参数缓存场景（可选） #

如果你的接口会传入不同的idusuario或where参数，需要按参数维度分别缓存，可以把缓存变量改成Map结构，用参数生成唯一key存储对应流：

private ordenesOperarioCacheMap = new Map<string, Observable<any>>();

ObtenerOrdenxOperario(idusuario, where): Observable<any> {
  const cacheKey = `${idusuario}_${where}`;
  if (this.ordenesOperarioCacheMap.has(cacheKey)) {
    return this.ordenesOperarioCacheMap.get(cacheKey)!;
  }

  const params = new HttpParams().set("IdUsuario", idusuario).set("Where", where);
  const headers = new HttpHeaders().set('Content-Type', 'application/json');
  const request$ = this.httpclient.get(
    `${environment.urlColector}/obtenerOrdenxOperario`,
    { headers, params }
  ).pipe(shareReplay(1));
  this.ordenesOperarioCacheMap.set(cacheKey, request$);
  return request$;
}

• 不要在组件的providers数组中注册AuthService，否则会生成多个服务实例，每个实例会维护独立的缓存，导致缓存失效。
• 组件层的原有调用、订阅逻辑不需要修改，正常调用服务方法即可，第一次进入页面发起请求后，后续路由跳转再返回会直接读取缓存结果，不会重复发起HTTP调用。
• 如果需要在数据更新后强制刷新，调用服务里的clearOrdenesCache方法清空缓存，下次调用接口就会重新发起请求拉取最新数据。

内容的提问来源于stack exchange，提问作者Guille Acosta