本文介绍基于 rxjs 的 angular 服务级数据缓存方案，利用 `behaviorsubject` 触发请求、`sharereplay(1)` 实现单次 http 请求结果多订阅共享，避免重复调用，符合 angular 官方风格指南推荐的响应式、可观察对象优先实践。
在 Angular 应用中，服务（Service）作为数据获取与业务逻辑的核心载体，常需支持多种视图或组件对同一数据源的不同消费方式——例如全量加载、条件过滤、分页查询等。若每个方法都独立调用 httpClient.get()，不仅造成冗余网络请求，还违背了“单一数据源”和“状态复用”的设计原则。
理想的缓存策略应满足以下要求：
✅ 请求仅执行一次（首次订阅时触发）；
✅ 后续订阅直接获取已缓存结果（冷热转换）；
✅ 支持参数化刷新（如带查询参数的重新加载）；
✅ 符合 Angular 风格指南：使用 Observable 作为公共接口，避免私有变量暴露状态；
✅ 线程安全、可取消、可测试。
推荐实现：BehaviorSubject + switchMap + shareReplay(1)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, first, switchMap, shareReplay } from 'rxjs';
interface Data {
id: number;
name: string;
status: string;
}
interface Params {
filter?: string;
limit?: number;
}
@Injectable({
providedIn: 'root'
})
export class DataService {
// 公共只读 Observable，对外暴露缓存后的数据流
readonly data$: Observable<Data>;
// 私有触发器：用于主动发起新请求（支持参数更新）
private readonly trigger$ = new BehaviorSubject<Params>({});
constructor(private http: HttpClient) {
this.data$ = this.trigger$.pipe(
switchMap(params =>
this.http.get<Data>(`/api/data`, { params: params as any })
),
shareReplay({ bufferSize: 1, refCount: true }) // ✅ 关键：缓存最新值，自动管理订阅生命周期
);
}
// 主动触发请求（带参），返回首次发出的值（适合一次性获取场景）
getData(params: Params = {}): Observable<Data> {
this.trigger$.next(params);
return this.data$.pipe(first()); // 可选：确保只取第一个 emit 值
}
// 直接复用已缓存的 data$，无需重复请求
getFilteredData(): Observable<Data> {
return this.data$.pipe(
// 示例：过滤 status === 'active'
map(data => ({ ...data, status: 'active' }))
);
}
// 其他衍生方法同样复用 data$
getSummary(): Observable<{ count: number }> {
return this.data$.pipe(
map(data => ({ count: data.id }))
);
}
}✅ 关键要点说明
-
shareReplay({ bufferSize: 1, refCount: true }) 是核心：
- bufferSize: 1 表示只保留最新一次响应；
- refCount: true 表示当最后一个订阅者取消时，内部 Observable 自动完成（避免内存泄漏），下次有新订阅时会重新触发请求（配合 trigger$）；
- 相比 publishReplay(1).refCount() 更语义清晰，是 Angular 社区当前推荐写法。
BehaviorSubject 作为触发器而非数据容器：
它不存储业务数据本身，仅负责“通知需要刷新”，真正数据由 data$ 统一承载和分发，职责分离清晰。getData() 返回 first() 是可选优化：
若调用方只需要“本次请求的结果”，用 first() 可立即完成订阅；若需持续监听后续刷新（如参数变更后），则直接订阅 data$ 即可。
⚠️ 注意事项
- 不要将 data$ 直接赋值为 this.http.get(...).pipe(shareReplay(1)) —— 这会导致无触发机制的冷缓存，无法按需刷新；
- 避免在 getFilteredData() 中再次调用 getData()，否则破坏缓存逻辑；
- 若涉及认证 Token 变更、用户登出等全局状态变化，需手动调用 this.trigger$.next({}) 或重置 BehaviorSubject；
- 在单元测试中，可通过 trigger$.next(mockParams) + tick() 模拟异步响应，确保可测性。
通过该模式，你的服务既保持了响应式编程的声明性优势，又实现了轻量、可控、符合 Angular 生态的数据缓存能力——真正做到了“一次请求，处处复用”。
