Typescript循环内API订阅未完成便执行后续代码如何解决

• 原有逻辑的完成判定存在缺陷：接口返回顺序和请求发送顺序不一定一致，当最后一个发起的请求率先返回时，done会被提前标记为true，但其余请求还未返回，此时轮询等待逻辑会误认为所有请求已完成，若剩余请求的总耗时超过你设置的10秒阈值，就会触发超时报错。
• 循环中重复给GetDataSubScription赋值，只会保留最后一个请求的订阅引用，无法统一管理所有请求的销毁。

使用RxJS原生的forkJoin操作符，它会等待所有传入的Observable都完成后，按请求发起的顺序一次性返回所有结果，不需要自行维护计数、轮询等待，从根本上避免超时问题。

小提示：如果你的getData返回的不是自动完成的Observable（比如自定义的持久化流），可以在pipe中追加take(1)操作符，确保每个请求拿到第一次返回结果后就进入完成状态，保证forkJoin正常触发。

改造后的代码示例 #

// 首先导入依赖，rxjs 7+ 版本引入firstValueFrom，旧版本可直接用toPromise()
import { forkJoin, firstValueFrom } from 'rxjs';

// ... 你的其他业务代码

let myArray: any[] = ["hello","world"];
// 把数组每一项转为对应的请求Observable，统一加takeUntil销毁逻辑
const requestList = myArray.map(item => 
  this.myService.getData(item).pipe(takeUntil(this.ngUnsubscribe))
);

// 等待所有请求完成，按顺序返回结果数组
const dataFromAPIcall = await firstValueFrom(forkJoin(requestList));

// 后续处理逻辑直接执行即可，此时所有接口数据已全部返回
let destinationArray: any[] = [];
for(let i = 0; i < dataFromAPIcall.length; i++) {
    destinationArray[i] = [dataFromAPIcall[i].something1, dataFromAPIcall[i].something2]
}

• 无需手动维护请求完成状态、不需要设置超时轮询，天然保证所有请求完成后才执行后续逻辑
• 返回结果的顺序和你发起请求的顺序完全一致，不会出现数据顺序错乱的问题
• 所有请求都绑定了takeUntil销毁逻辑，组件销毁时会自动取消所有未完成的请求，不会出现内存泄漏

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