RxJs：实现带定时缓存失效且无订阅时不触发请求的shareReplay()方案咨询

嘿，这个问题确实戳中了shareReplay的一个常见痛点——默认情况下它会一直维持内部订阅，哪怕没有外部订阅者，也会跟着interval定时触发接口请求，完全不符合我们想要的“按需缓存”逻辑！

要实现有订阅时才检查缓存，缓存超时才发起请求，无订阅时彻底休眠不执行任何操作，这里给你两种实用的实现方式，都是RxJS里常用的解决方案：

方式一：结合shareReplay的refCount+手动缓存过期判断 #

这种方式利用shareReplay的refCount配置，让内部订阅在最后一个外部订阅取消后自动销毁，同时通过时间戳判断缓存是否过期：

import { Observable, shareReplay, tap } from 'rxjs';

// 封装一个带缓存的请求函数，参数是缓存有效期（毫秒）
function createCachedWsCall(cacheDuration: number = 10000) {
  let lastFetchTime = 0;
  let cached$: Observable<any> | null = null;

  return () => {
    const now = Date.now();
    // 缓存不存在/已过期，重新构建请求Observable
    if (!cached$ || (now - lastFetchTime) > cacheDuration) {
      cached$ = wsCall().pipe(
        tap(() => lastFetchTime = now), // 更新最后请求时间
        shareReplay({ bufferSize: 1, refCount: true }) // 有订阅时维持内部订阅，无订阅时销毁
      );
    }
    return cached$;
  };
}

// 使用示例
const getCachedWsData = createCachedWsCall(10000);

// 第一次订阅：发起请求，缓存结果
getCachedWsData().subscribe(data => console.log('首次订阅:', data));
// 10秒内再次订阅：直接返回缓存，不会发起新请求
setTimeout(() => {
  getCachedWsData().subscribe(data => console.log('缓存复用:', data));
}, 5000);
// 超过10秒订阅：重新发起请求，更新缓存
setTimeout(() => {
  getCachedWsData().subscribe(data => console.log('缓存过期重新请求:', data));
}, 11000);
// 所有订阅取消后，内部订阅会销毁，不会再定时触发请求

方式二：用BehaviorSubject手动管控缓存生命周期 #

如果想要更直观地掌控缓存的每一步（比如主动清空缓存、精准判断过期），可以用BehaviorSubject手动管理：

import { BehaviorSubject, Observable, tap } from 'rxjs';

class WsCacheService {
  private cacheSubject = new BehaviorSubject<any | null>(null);
  private lastFetchTime = 0;
  private isFetching = false;
  private readonly cacheDuration = 10000; // 缓存有效期10秒

  getWsData(): Observable<any> {
    const now = Date.now();
    // 缓存存在且未过期，直接返回缓存
    if (this.cacheSubject.value !== null && (now - this.lastFetchTime) <= this.cacheDuration) {
      return this.cacheSubject.asObservable();
    }
    // 正在请求中，返回当前请求的Observable（避免重复请求）
    if (this.isFetching) {
      return this.cacheSubject.asObservable();
    }

    // 发起新请求
    this.isFetching = true;
    wsCall().pipe(
      tap(data => {
        this.cacheSubject.next(data);
        this.lastFetchTime = now;
        this.isFetching = false;
      })
    ).subscribe(); // 触发请求，把结果存入BehaviorSubject

    return this.cacheSubject.asObservable();
  }
}

// 使用示例
const cacheService = new WsCacheService();
// 首次订阅触发请求
cacheService.getWsData().subscribe(data => console.log(data));
// 无订阅时，不会有任何请求动作；缓存过期后仅清空缓存，不会主动请求

关键知识点提醒 #

• shareReplay({ refCount: true })是核心：它会让内部订阅的生命周期和外部订阅绑定，没有外部订阅时内部订阅会自动销毁，从根源上避免无意义的定时请求。
• 不要依赖shareReplay的windowTime参数：它只是控制缓存值的保留时间，不会主动重新请求，而且如果没有refCount: true，内部订阅还是会一直存在。

备注：内容来源于stack exchange，提问作者tris