服务缓存的最优实现方案探讨

• 并发请求重复发起：如果多个组件同时调用getCourses()，在缓存还没加载完成的时候，每个调用都会单独发起一次API请求，平白给服务器增加压力。
• 类型不安全：coursesCache和返回的Observable都用了any类型，没有明确的类型约束，后期维护容易出问题，也没法享受TypeScript的类型校验优势。
• 没有缓存失效机制：数据一旦缓存就不会更新，除非重启服务，后端数据变了前端也拿不到新的，会展示旧数据。
• 缺少错误处理：如果API请求失败，tap不会执行缓存赋值，后面再调用getCourses()还会继续发起请求，而且没做错误捕获，可能导致组件订阅报错。

下面是几种Angular里常用的靠谱缓存方案：

方案1：用shareReplay搞定并发请求和基础缓存 #

RxJS的shareReplay能在第一次请求完成后，把结果重播给所有后续订阅的组件，还能自动处理并发请求的问题：

import { Observable, shareReplay } from 'rxjs';
// 先定义好Course类型，比如从model文件导入
import { Course } from './course.model';

private coursesCache$: Observable<Course[]> | null = null;

getCourses(): Observable<Course[]> {
  if (!this.coursesCache$) {
    this.coursesCache$ = this.courseService.getCourses().pipe(
      shareReplay(1) // 把最新的1次结果重播给后续订阅者
    );
  }
  return this.coursesCache$;
}

// 可选：加个刷新缓存的方法，需要更新数据时调用
refreshCourses(): void {
  this.coursesCache$ = null;
}

• 好处：不用手动管理缓存变量，代码简洁，还能避免并发重复请求。
• 扩展：调用refreshCourses()就能清空缓存，触发新的API请求拿最新数据。

方案2：带自动过期的缓存 #

如果需要缓存自动失效，结合timer和switchMap就能实现定时刷新：

import { Observable, shareReplay, switchMap, timer } from 'rxjs';
import { Course } from './course.model';

private coursesCache$: Observable<Course[]> | null = null;
private readonly CACHE_TTL = 300000; // 5分钟，单位毫秒

getCourses(): Observable<Course[]> {
  if (!this.coursesCache$) {
    this.coursesCache$ = timer(0, this.CACHE_TTL).pipe(
      switchMap(() => this.courseService.getCourses()),
      shareReplay(1)
    );
  }
  return this.coursesCache$;
}

// 手动刷新缓存
refreshCourses(): void {
  this.coursesCache$ = null;
}

• 好处：缓存会每隔指定时间自动刷新，保证数据不会太旧。
• 说明：timer(0, TTL)会立刻发起第一次请求，之后每过TTL时间就重新请求一次。

方案3：用BehaviorSubject实现可控缓存 #

BehaviorSubject能存储当前值，还能主动更新缓存，适合需要手动控制缓存内容的场景：

import { BehaviorSubject, Observable, filter } from 'rxjs';
import { Course } from './course.model';

private coursesSubject = new BehaviorSubject<Course[] | null>(null);
private isLoading = false;

getCourses(): Observable<Course[]> {
  if (!this.coursesSubject.value && !this.isLoading) {
    this.isLoading = true;
    this.courseService.getCourses().subscribe({
      next: (courses) => {
        this.coursesSubject.next(courses);
        this.isLoading = false;
      },
      error: (err) => {
        this.isLoading = false;
        // 这里可以统一处理错误，比如给用户弹提示
        console.error('获取课程失败:', err);
      }
    });
  }
  return this.coursesSubject.asObservable().pipe(
    filter(courses => courses !== null) // 过滤掉初始的null值
  );
}

// 主动更新缓存数据，比如新增课程后直接调用
updateCourses(courses: Course[]): void {
  this.coursesSubject.next(courses);
}

// 清空缓存
clearCache(): void {
  this.coursesSubject.next(null);
}

• 好处：可以手动更新或清空缓存，方便处理数据修改后的同步，还通过isLoading避免并发请求。
• 适用场景：需要手动控制缓存内容的业务，比如新增/编辑课程后直接更新缓存，不用再发API请求。

• 加类型定义：给缓存数据和Observable明确类型，代码可读性更高，还能提前发现类型错误。
• 加错误处理：在API请求的管道里加catchError，统一处理请求错误，别让错误跑到组件里。
• 多维度缓存：如果需要按不同参数缓存（比如按分类获取课程），可以用Map存不同键对应的缓存Observable，实现多条件缓存。

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