Angular如何实现依次循环调用后端接口 待前次响应返回后再发起下一次

你的原代码出现并发问题的核心原因是：for循环为同步执行逻辑，遍历过程中会立刻触发所有请求的订阅操作，不会等待前一个请求返回结果，因此所有请求会同时发出。

下面给出两种可直接落地的实现方案： #

方案1：使用RxJS concatMap 实现（推荐） #

这是Angular生态下最符合响应式编程规范的方案，concatMap 会严格等待前一个Observable完成后，才会处理下一个数据源：

首先导入需要的RxJS依赖：

import { from, EMPTY, Subscription } from 'rxjs';
import { concatMap, finalize, catchError } from 'rxjs/operators';

业务代码实现：

// 声明总订阅，用于组件销毁时取消，避免内存泄漏
private totalSub: Subscription;

// 串行请求触发逻辑
processSalaryByBranch() {
  // 先重置状态
  this.salProcessList = [];
  // 把branchList转成Observable序列
  this.totalSub = from(this.branchList).pipe(
    // 串行处理每个分支的请求，前一个完成才走下一个
    concatMap(branch => {
      // 给表单赋值当前分支编码
      this.form.get('branch_code').setValue(branch.branch_code);
      // 返回当前请求的Observable
      return this.payrollService.submitForSalaryProcess(this.form.value, this.cycleList).pipe(
        // 单个请求错误捕获：如果需要出错后继续跑后续请求，就返回EMPTY，否则抛出错误终止整个流程
        catchError(err => {
          this.commonService.showErrorMsg('分支请求出错：' + err.message);
          // 返回EMPTY代表跳过当前错误，继续下一个请求
          return EMPTY;
        })
      );
    }),
    // 全部请求完成后的收尾逻辑，比如关闭加载动画
    finalize(() => {
      console.log('所有分支请求处理完成');
    })
  ).subscribe(data => {
    if (!data) return; // 跳过出错的请求返回
    if (data['isExecuted'] == false) {
      this.commonService.showErrorMsg(data['message']);
    } else {
      // 如果需要合并所有分支的返回结果，可以push而不是直接赋值
      // this.salProcessList.push(...data['data']);
      this.salProcessList = data['data'];
    }
  });
}

// 组件销毁时取消订阅
ngOnDestroy() {
  if (this.totalSub) {
    this.totalSub.unsubscribe();
  }
}

方案2：使用async/await 实现 #

如果你更熟悉JS异步语法，也可以把Observable转为Promise，结合for循环实现串行：

// 串行请求逻辑，标记为async
async processSalaryByBranch() {
  this.salProcessList = [];
  for (let i = 0; i < this.branchList.length; i++) {
    const branch = this.branchList[i];
    this.form.get('branch_code').setValue(branch.branch_code);
    try {
      // 用toPromise()把Observable转成Promise，await等待请求完成
      const data = await this.payrollService.submitForSalaryProcess(this.form.value, this.cycleList).toPromise();
      if (data['isExecuted'] == false) {
        this.commonService.showErrorMsg(data['message']);
      } else {
        this.salProcessList = data['data'];
      }
    } catch (err) {
      this.commonService.showErrorMsg('分支请求出错：' + err.message);
      // 如果需要出错后终止后续请求，就加throw err; 否则continue继续下一个
      continue;
    }
  }
  console.log('所有分支请求处理完成');
}

注意事项 #

• 如果需要合并所有分支的返回数据，不要直接赋值this.salProcessList = data['data']，改成push拼接即可
• 单请求的错误处理逻辑可以根据业务调整：是终止全部流程，还是跳过错误继续执行后续请求
• RxJS方案中一定要记得在组件销毁时取消总订阅，避免内存泄漏

内容的提问来源于stack exchange，提问作者A.K.M. Arifur Rahman