Angular14.2.6：过滤对象列表与避免重复服务请求问题

核心问题诊断 #

你当前的问题根源在于：

1. 去重逻辑时机错误，大概率是在服务请求完成后才执行，导致重复请求已经发起
2. 多子组件同时初始化时，父组件的spiPerList数组还未完成更新，每个子组件检查时都判定无重复，进而重复调用服务
3. setSureScriptProviderMedPerList方法如果是异步操作或存在引用更新问题，会导致检查逻辑与数组状态不同步，触发竞态条件

具体解决方案 #

方案1：父组件统一管控请求状态（低耦合） #

利用父组件的全局视角，维护已加载的ProviderSpi集合，子组件在调用服务前先申请许可，从根源避免重复请求。

父组件代码

@Component({
  selector: 'app-parent',
  template: `<app-child *ngFor="let spi of providerSpis" [targetSpi]="spi"></app-child>`
})
export class ParentComponent {
  spiPerList: MedicationPermissionModel[] = [];
  private loadedSpiSet = new Set<string>(); // 用Set实现O(1)复杂度的存在性判断

  // 子组件调用此方法确认是否可发起请求
  allowLoadSpi(targetSpi: string): boolean {
    if (this.loadedSpiSet.has(targetSpi)) return false;
    this.loadedSpiSet.add(targetSpi); // 提前标记为已加载，阻断后续重复请求
    return true;
  }

  // 安全添加记录到列表
  addMedPermission(medObj: MedicationPermissionModel) {
    this.spiPerList.push(medObj);
  }
}

子组件代码

@Component({
  selector: 'app-child',
  template: ``
})
export class ChildComponent implements OnInit {
  @Input() targetSpi!: string;
  @Host() private parentComp!: ParentComponent; // 注入父组件实例

  constructor(private medicationService: MedicationService) {}

  async ngOnInit() {
    // 先检查权限，直接跳过重复请求
    if (!this.parentComp.allowLoadSpi(this.targetSpi)) {
      console.log(`Spi ${this.targetSpi} 已存在，跳过请求`);
      return;
    }

    try {
      const medPerObj = await this.medicationService.getProviderServiceLevelToPromise(this.targetSpi);
      this.parentComp.addMedPermission(medPerObj);
    } catch (err) {
      // 请求失败时移除标记，允许后续重试（可选）
      this.parentComp.loadedSpiSet.delete(this.targetSpi);
      console.error(`加载Spi ${this.targetSpi} 失败`, err);
    }
  }
}

方案2：服务层缓存请求（解耦父子组件） #

利用Angular服务的单例特性，在medicationService中缓存请求Promise，确保同一ProviderSpi只会发起一次请求。

medicationService代码

@Injectable({ providedIn: 'root' })
export class MedicationService {
  private requestCache = new Map<string, Promise<MedicationPermissionModel>>();

  async getProviderServiceLevelToPromise(providerSpi: string): Promise<MedicationPermissionModel> {
    // 已有缓存请求时，直接返回该Promise，避免重复发起HTTP请求
    if (this.requestCache.has(providerSpi)) {
      return this.requestCache.get(providerSpi)!;
    }

    // 发起新请求并缓存Promise
    const reqPromise = this.http.get<MedicationPermissionModel>(`/api/provider/${providerSpi}`)
      .toPromise()
      .finally(() => {
        // 请求完成后移除缓存（如需持久化缓存可删除此逻辑）
        this.requestCache.delete(providerSpi);
      });

    this.requestCache.set(providerSpi, reqPromise);
    return reqPromise;
  }
}

子组件简化代码

async ngOnInit() {
  // 先检查本地列表是否已存在
  const exists = this.prescriptionService.getSureScriptProviderMedPerList()
    .some(item => item.providerSpi === this.targetSpi);
  if (exists) return;

  try {
    const medPerObj = await this.medicationService.getProviderServiceLevelToPromise(this.targetSpi);
    this.prescriptionService.setSureScriptProviderMedPerList(medPerObj);
  } catch (err) {
    console.error(err);
  }
}

方案3：修复setSureScriptProviderMedPerList方法 #

你提到代码卡在该方法，需重点检查其实现：

• 如果是异步方法，必须用await等待执行完成，否则后续检查会读取旧数组状态
• 如果是数组更新逻辑，避免创建新数组（不可变更新），确保子组件能拿到最新数组引用：

  // 错误示例：创建新数组导致子组件引用未更新
  setSureScriptProviderMedPerList(item: MedicationPermissionModel) {
    this.spiPerList = [...this.spiPerList, item];
  }
  
  // 正确示例：直接修改原数组
  setSureScriptProviderMedPerList(item: MedicationPermissionModel) {
    this.spiPerList.push(item);
  }
  

  或用BehaviorSubject统一管理状态，确保组件能感知到数组变化：

  // 服务中用BehaviorSubject维护状态
  private spiListSubject = new BehaviorSubject<MedicationPermissionModel[]>([]);
  spiList$ = this.spiListSubject.asObservable();
  
  setSureScriptProviderMedPerList(item: MedicationPermissionModel) {
    const currentList = this.spiListSubject.value;
    if (!currentList.find(i => i.providerSpi === item.providerSpi)) {
      this.spiListSubject.next([...currentList, item]);
    }
  }
  

关键注意事项 #

• 必须在发起HTTP请求前执行去重检查，而非请求完成后
• 用Set/Map替代数组find方法，提升存在性判断的性能
• 处理竞态条件：多组件同时请求时，确保复用同一个Promise而非发起新请求

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