Angular中如何处理批量POST请求避免崩溃并支持同步进度跟踪

你当前的写法是在遍历中直接为每条数据发起HTTP请求并订阅，相当于一次性触发3000个并发请求。浏览器对同域名的并发请求数存在限制（通常为6~8个），超出限制的请求会全部堆积在内存中排队，最终引发内存占用过高、浏览器卡顿，抛出ERR_INSUFFICIENT_RESOURCES错误。
你之前尝试的forkJoin没有解决核心问题：它仍然会一次性发起所有请求，只是统一等待所有请求返回后才触发回调，并发过高的问题没有得到缓解。

核心思路是控制HTTP请求的并发数量，同时可以轻松实现进度统计，推荐用RxJS内置操作符实现，改动量很小：

1. 修正服务代码（修复遗漏的请求体参数） #

你原本的服务代码没有把item作为请求体传给后端，需要调整：

insert(item: Item): Observable<Item> {
  // 第二个参数为POST请求的请求体，传入待插入的item数据
  return this.http.post<Item>(`${APIURL}/item`, item);
}

2. 调整组件代码（控制并发+进度统计） #

// 顶部导入需要的RxJS依赖
import { from } from 'rxjs';
import { mergeMap, tap, retry } from 'rxjs/operators';

// 组件内声明进度相关变量，可直接绑定到视图展示
syncProgress: number = 0;
totalCount: number = 0;

// 同步逻辑
startSync() {
  this.totalCount = this.items.length;
  this.syncProgress = 0;

  from(this.items).pipe(
    // 第二个参数是并发数，建议设置为2~5，可根据后端承载能力调整
    mergeMap(item => this.itemService.insert(item).pipe(
      // 可选：单个请求失败自动重试2次，避免偶发网络问题导致同步失败
      retry(2)
    ), 3),
    // 每个请求完成后更新进度
    tap(() => {
      this.syncProgress++;
      // 这里直接更新视图，比如展示「3000条中已同步500条」
      console.log(`同步进度：${this.syncProgress}/${this.totalCount}`);
    })
  ).subscribe({
    complete: () => {
      console.log('全部数据同步完成');
      // 可添加同步完成的提示逻辑
    },
    error: (err) => {
      console.error('同步过程出现错误：', err);
      // 可自定义错误处理，比如选择中断同步或跳过错误继续执行
    }
  })
}

• 如果后端可以配合改造，优先做批量插入接口，一次传输100_{200条数据，总请求数会降到15}30次，同步性能会有量级提升
• 并发数不要设置过高，否则会把后端服务压垮，建议根据实际压测结果调整到最优值
• 如果需要支持暂停同步功能，可以搭配takeUntil操作符配合中止信号实现

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