Angular循环批量发起HTTP Delete请求执行异常该如何解决？

• 异步逻辑处理错误：Angular的HttpClient返回的Observable是异步执行的，原有代码中的循环是同步执行的，不等HTTP删除请求返回就直接进入下一轮，也不等所有请求完成就判断checkedLogs长度，自然逻辑不符合预期。
• 数组操作方法错误：splice()的第一个入参是数组元素的索引位置，你传入的是日志ID，根本无法正确移除数组中的对应元素，这是循环结束后checkedLogs.length始终不为0的直接原因。
• 遍历逻辑错误：循环遍历原数组的同时直接修改原数组长度，会导致迭代器取值错乱，无法正确获取到所有待删除的ID。

不需要额外手写等待函数，直接使用RxJS提供的forkJoin操作符即可批量处理并行异步请求，等所有删除请求全部完成后再执行后续逻辑。
首先需要在component.ts顶部导入依赖的RxJS操作符：

import { forkJoin, tap } from 'rxjs';

1. 修改component.ts中的deleteLogsByID方法 #

不要在方法内部订阅Observable，改为直接返回Observable，方便后续批量组合：

// 修改后，删除方法直接返回Observable，不在内部订阅
deleteLogsByID(id: number): Observable<any> {
  return this.LogsService.deleteLogsByID(id).pipe(
    tap({
      next: (data: any) => {
        this.deleteMessage = data;
      },
      error: (error: HttpErrorResponse) => {
        this.showSpinner = false;
        this.error = error.message;
        this.showError = true;
      }
    })
  );
}

2. 重写onModalConfirm方法 #

onModalConfirm() {
  this.updateSelectionAmount();
  if (this.selectionAmount === 0) return;

  // 先拷贝一份待删除ID数组，避免操作原数组导致遍历错乱
  const toDeleteIds = [...this.checkedLogs];
  // 生成所有删除请求的Observable数组
  const deleteRequests = toDeleteIds.map(id => this.deleteLogsByID(id));

  // 用forkJoin等待所有删除请求全部完成
  forkJoin(deleteRequests).subscribe({
    complete: () => {
      // 所有请求成功后清空待删数组，再刷新页面
      this.checkedLogs = [];
      window.location.reload();
    },
    error: () => {
      // 任意一个请求出错的处理逻辑，可按需补充
      console.error('部分日志删除失败');
    }
  })
}

如果后端可以支持批量删除接口，建议新增一个接收ID数组的后端接口，一次性提交所有待删除ID，避免发送大量单条删除请求，性能会好很多。

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