如何优化BehaviourSubject数组查值逻辑：无则请求并更新缓存

现有实现的问题 #

当前直接访问BehaviorSubject的value进行同步查找的方式存在以下缺陷：

• 无法响应BehaviorSubject的后续数据更新（比如初始值为空时，后续列表加载完成后无法自动复用已有数据）
• 未处理并发请求，同一ID的重复请求会多次调用接口
• 代码风格偏同步，没有充分利用RxJS响应式特性

优化方案 #

1. 调整BehaviorSubject初始值 #

将初始值从null改为空数组，简化后续逻辑，避免频繁处理空值：

private _carList = new BehaviorSubject<any[]>([]);
carList$ = this._carList.asObservable();

2. 维护请求缓存避免重复调用 #

新增一个Map用于缓存正在进行的请求，防止同一ID被多次请求：

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

3. 重构getById方法 #

利用RxJS操作符实现响应式的查找与请求逻辑：

import { of, throwError, Observable } from 'rxjs';
import { filter, map, take, switchMap, tap, catchError } from 'rxjs/operators';

// ...

getById(id: string): Observable<any> {
  return this.carList$.pipe(
    // 等待列表非空（初始为空数组时，后续加载完成后会触发新的流）
    filter(list => list.length > 0),
    // 从列表中查找目标车辆
    map(list => list.find(car => car.id === id)),
    // 过滤出找到的结果，若未找到则进入后续逻辑
    filter(car => !!car),
    take(1),
    // 未找到时切换到服务器请求逻辑
    switchMap(foundCar => {
      if (foundCar) return of(foundCar);

      // 检查是否已有正在处理的请求，避免重复调用接口
      if (this.pendingRequests.has(id)) {
        return this.pendingRequests.get(id)!;
      }

      const request$ = this.getCarDataFromServer(id).pipe(
        // 请求成功后更新本地列表，同时避免重复添加
        tap(newCar => {
          const currentList = this._carList.value;
          if (!currentList.some(car => car.id === id)) {
            this._carList.next([...currentList, newCar]);
          }
          this.pendingRequests.delete(id);
        }),
        // 请求失败时清理缓存，避免后续请求被阻塞
        catchError(error => {
          this.pendingRequests.delete(id);
          return throwError(() => error);
        })
      );

      this.pendingRequests.set(id, request$);
      return request$;
    })
  );
}

关键优化点说明 #

• 基于carList$流进行查找，自动响应列表的后续更新，无需同步访问value
• 通过pendingRequests缓存并发请求，同一ID仅发起一次接口调用
• 使用RxJS操作符串联逻辑，符合响应式编程风格，逻辑更清晰
• 更新列表时增加重复检查，避免竞态条件导致的重复数据
• 处理请求失败场景，及时清理缓存，保证后续请求正常执行

注意：若原getCarDataFromServer方法内部已包含更新_carList的逻辑，请移除该部分，统一在getById的tap操作中处理，避免重复更新。

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