Angular循环调用接口响应延迟导致数组更新异常，如何等待所有请求完成后执行后续逻辑

问题本质 #

该执行顺序问题是JavaScript异步执行模型导致的：subscribe触发的接口请求是异步操作，会进入事件队列等待主线程空闲时执行。主线程会优先执行完所有同步代码（while循环、循环后的forEach逻辑），才会处理接口返回的响应，因此循环结束时names数组必然为空。

代码修改步骤 #

1. 调整getEmpData方法 #

不要在方法内部直接订阅，改为返回Observable对象供后续统一处理：

import { Observable } from 'rxjs';

// 调整方法定义，接收参数避免闭包导致的参数错乱，返回Observable
getEmpData(startRow: number, countRow: number, id: any, search: any): Observable<any> {    
  return this.empService.getEmpData(startRow, countRow, id, search);
}

2. 用forkJoin等待所有请求完成 #

forkJoin是RxJS提供的组合操作符，会等待所有传入的Observable都响应完成后，统一返回按请求顺序排列的结果数组，刚好匹配需求：

import { forkJoin } from 'rxjs';

GetData(){
  const xyz = [];
  const pqr = [];
  let currentStartRow = 0;
  this.names = [];
  // 存储所有请求的Observable
  const requestList = [];

  while(currentStartRow <= this.num) {
    // 收集所有请求，传入当前分页参数
    requestList.push(this.getEmpData(currentStartRow, this.countRow, this.id, this.search));
    currentStartRow += this.countRow;
    console.log("Pass1");
  }

  // 订阅所有请求的合并结果，所有接口返回后才会触发回调
  forkJoin(requestList).subscribe(responseList => {
    // 拼接所有接口返回的数据到names数组
    responseList.forEach(resp => {
      this.names = this.names.concat(resp);
    });
    console.log("所有请求完成，names数组：", this.names);

    // 所有后续逻辑必须放在这个回调内部执行
    this.names.forEach(value => {
      xyz.push(value);
    });
    // 此处继续编写后续业务逻辑
  })
}

可选：异常兼容处理 #

如果需要避免单个接口报错导致全部请求失效，可以给每个请求添加错误捕获逻辑：

import { of, catchError } from 'rxjs';

// 收集请求时添加错误处理
requestList.push(
  this.getEmpData(currentStartRow, this.countRow, this.id, this.search)
    .pipe(
      catchError(err => {
        console.error('分页请求出错:', err);
        return of([]); // 出错时返回空数组，不影响其他数据拼接
      })
    )
);

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