Angular中循环调用HTTP GET请求返回数据顺序混乱问题

你的问题根源在于：循环中直接发起HTTP GET请求并订阅，而HTTP请求是异步操作，每个请求的响应耗时不同，所以返回结果的顺序会和发送顺序不一致。

以下是针对RxJS 7.8.0 + Angular 15的两种可靠解决方案：

方案1：顺序执行请求（保证请求按顺序发起+响应） #

使用concatMap操作符，它会等待前一个请求完成后，再发起下一个请求，确保响应顺序与原数组顺序完全一致：

import { from } from 'rxjs';
import { concatMap, tap } from 'rxjs/operators';

// 替换原循环代码
from(datas).pipe(
  concatMap(carObj => this.CarService.getCarForm(carObj.smiles)),
  tap(val => console.log(val)) // 输出顺序为1,2,3,4,5
).subscribe();

方案2：并行请求+按原顺序返回结果 #

使用forkJoin操作符，它会并行发起所有请求，待全部请求完成后，返回一个与原请求数组顺序完全一致的结果数组（效率更高，适合无依赖的请求场景）：

import { forkJoin } from 'rxjs';

// 替换原循环代码
const requestList = datas.map(carObj => this.CarService.getCarForm(carObj.smiles));

forkJoin(requestList).subscribe(results => {
  // results数组顺序与datas完全匹配，即[1,2,3,4,5]
  results.forEach(val => console.log(val));
});

为什么你之前的尝试无效？ #

• pipe(first())：仅用于取Observable的第一个值，不影响异步操作的执行顺序
• 取消订阅：用于避免内存泄漏，和结果顺序无关
• 改用Promise：若只是循环中直接调用then，仍属于并行异步操作，顺序依然会乱；若要Promise实现顺序执行，需用for await...of，但RxJS方案更契合Angular生态

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