Angular中如何高效删除Observable内所有条目避免大量HTTP请求

逐个遍历元素发起单条删除请求的方案，在数据量较大时会产生大量HTTP请求，除了性能差之外，还极易出现部分请求成功、部分失败的数据不一致问题，可按以下优先级选择实现方案：

优先对接后端批量删除接口（最优解） #

这是性能、可靠性最高的方案，从根源上把N次请求压缩为1次请求：

• 如果是删除指定集合内的所有条目，让后端提供支持ID数组传参的批量删除接口，前端只需从Observable中取出全量条目ID，一次传给后端即可
• 如果是清空该Observable绑定的整个数据集，直接让后端提供全量清空接口，前端连ID提取的步骤都不需要
• RxJS场景实现示例：

// 批量删除指定ID集合场景
const BATCH_DELETE_URL = '/api/items/batch-delete';
this.items$.pipe(
  take(1), // 仅取一次当前存储的最新值，避免重复触发
  map(itemList => itemList.map(i => i.id)),
  switchMap(ids => this.http.post(BATCH_DELETE_URL, { ids })),
  // 接口返回成功后，同步清空本地Observable存储的状态
  tap(() => this.items$.next([]))
).subscribe();

// 全量清空场景
const CLEAR_ALL_URL = '/api/items/clear';
this.http.delete(CLEAR_ALL_URL).pipe(
  tap(() => this.items$.next([]))
).subscribe();

无批量接口时的前端兜底优化 #

如果后端暂时无法提供批量接口，不要直接无控制并发/串行发所有请求，做两层优化：

• 控制请求并发数：通过RxJS的mergeMap配置并发上限，通常设置为3-6即可，避免瞬间打满浏览器TCP连接池、触发后端限流规则，比串行请求速度快数倍，比无控并发稳定性高

// 配置最大并发请求数
const MAX_CONCURRENT = 5;
this.items$.pipe(
  take(1),
  mergeMap(itemList => from(itemList)),
  mergeMap(item => this.http.delete(`/api/items/${item.id}`), MAX_CONCURRENT),
  // 所有请求结束（无论成功失败）后，同步本地状态
  finalize(() => this.items$.next([]))
).subscribe();

• 增加异常兜底：给单个删除请求加最多2次的失败重试，全部请求执行完成后可主动拉一次最新列表校验删除结果，对漏删的条目补做删除，避免数据不一致

注意：前端并发优化只是临时兜底方案，只要业务条件允许，第一优先级永远是推动后端提供批量操作接口，不要在前端硬扛大量单请求的开销。

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