Angular共享服务重复加载数据：如何实现单次数据加载？

你的问题核心在于当前的UserDetailsService每次调用loadUserDetails都会发起新的HTTP请求，完全没有考虑缓存或正在进行的请求状态，所以两个组件调用时就会触发重复请求。下面是一套完整的解决方案，从根本上实现同一用户数据仅加载一次的需求：

改造共享服务：添加缓存与请求状态管理 #

我们需要在服务中加入两个核心缓存机制：

1. 已加载用户数据的缓存，避免重复请求同一用户
2. 正在进行的请求缓存，避免并发场景下的重复请求

改造后的完整服务代码：

@Injectable({ providedIn: 'root' })
export class UserDetailsService {
  private userDetailsSubject: BehaviorSubject<UserDetails> = new BehaviorSubject<UserDetails>(new UserDetails());
  public currentModel: Observable<UserDetails> = this.userDetailsSubject.asObservable();
  
  // 新增：缓存已加载的用户详情，key为用户ID
  private userDetailsCache = new Map<string, UserDetails>();
  // 新增：缓存正在进行的请求，避免并发重复请求
  private pendingRequests = new Map<string, Observable<UserDetails>>();

  constructor(private userDetailsRepository: UserDetailsRepository) {}

  public loadUserDetails(id: string): void {
    // 第一步：检查是否已有缓存数据
    const cachedDetails = this.userDetailsCache.get(id);
    if (cachedDetails) {
      this.userDetailsSubject.next(cachedDetails);
      return;
    }

    // 第二步：检查是否有正在进行的请求，复用该请求
    const pendingRequest = this.pendingRequests.get(id);
    if (pendingRequest) {
      pendingRequest.subscribe({
        next: details => this.userDetailsSubject.next(details),
        error: () => console.error('复用请求加载用户详情失败')
      });
      return;
    }

    // 第三步：发起新请求并管理状态
    const request$ = this.userDetailsRepository.loadUserDetails(id).pipe(
      tap(details => {
        // 请求成功后更新缓存
        this.userDetailsCache.set(id, details);
        // 同步数据到所有订阅组件
        this.userDetailsSubject.next(details);
      }),
      finalize(() => {
        // 请求完成（成功/失败）后移除pending标记
        this.pendingRequests.delete(id);
      })
    );

    // 记录正在进行的请求
    this.pendingRequests.set(id, request$);
    // 订阅请求处理结果
    request$.subscribe({
      error: err => console.error('加载用户详情失败:', err)
    });
  }
}

关键细节说明 #

• 单例服务确保共享：一定要用providedIn: 'root'声明服务，确保两个组件注入的是同一个服务实例，这是共享数据的基础。
• 缓存机制：userDetailsCache存储已加载的用户数据，后续调用直接返回缓存，无需再发请求。
• 并发请求处理：pendingRequests解决了两个组件几乎同时调用的场景，第二个调用会复用第一个正在进行的请求，不会重复发起HTTP请求。
• 请求状态清理：finalize操作符确保不管请求成功还是失败，都会清除pending标记，避免后续请求被阻塞。

为什么你之前的debounceTime方案没生效？ #

你尝试的Subject<string>加debounceTime的思路，本质是延迟请求，但无法解决两个核心问题：

1. 如果两个组件的调用间隔极短（比如都在ngOnInit中触发），debounceTime的延迟可能来不及生效，还是会发两次请求。
2. 没有缓存已加载的数据，下次调用同一用户ID时，依然会发起新请求。

而上面的缓存+请求状态管理方案，从根源上避免了重复请求，不管调用时机如何，同一用户ID只会加载一次。

组件代码优化（可选） #

为了避免内存泄漏，建议在组件中使用takeUntil操作符管理订阅：

export class UserLookupComponent implements OnInit, OnDestroy {
  public user: User;
  private destroy$ = new Subject<void>();

  constructor(private detailsService: UserDetailsService) {}

  public loadUserDetails() {
    if (this.user?.id) {
      this.detailsService.loadUserDetails(this.user.id);
    }
  }

  ngOnInit() {
    this.detailsService.currentModel.pipe(
      takeUntil(this.destroy$)
    ).subscribe(details => {
      this.user.details = details;
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Overview组件的优化逻辑完全一致，只需替换业务相关代码即可。

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