RxJS forkJoin关联请求ID与响应及异步执行顺序问题

问题解决：关联请求ID与响应 + 确保异步执行顺序 #

一、关联信息ID与第二次请求响应 #

你之前的写法报错，是因为forkJoin仅接受Observable/Promise/可迭代对象，不能直接传入普通对象。正确的做法是在每个getOtherDetails的数据流中，用map操作符把响应数据和对应的ID包装成一个对象，这样forkJoin返回的结果数组里，每个元素都会包含ID和对应的数据：

getInformations().subscribe(informations => {
  // 用map遍历informations，生成带ID绑定的Observable数组
  const subs = informations.map(information => 
    getOtherDetails(information.id).pipe(
      map(data => ({ id: information.id, data })) // 把ID和响应数据绑定
    )
  );

  forkJoin(subs).subscribe(responses => {
    // responses结构：[{id: 1, data: ...}, {id: 2, data: ...}, ...]
    responses.forEach(({id, data}) => {
      // 这里可以直接关联ID与对应数据进行处理
      console.log(`ID ${id} 的详情数据:`, data);
    });
  });
});

二、确保useInformationReceivedFromgetData()在请求完成后执行 #

你用async/await但未生效，核心原因是getData内部用的是subscribe回调，它不会返回Promise，因此await getData()无法等待订阅完成。要让await生效，需要把Observable转换成Promise：

方案1：RxJS 6及以下版本（用toPromise）

async ngOnChanges(){
    await getData(); 
    useInformationReceivedFromgetData(); // 现在会严格在getData完成后执行
}

async getData(){
  // 等待第一个请求完成，拿到informations
  const informations = await getInformations().toPromise();
  
  const subs = informations.map(information => 
    getOtherDetails(information.id).pipe(
      map(data => ({ id: information.id, data }))
    )
  );

  // 等待所有详情请求完成，处理结果
  const objects = await forkJoin(subs).toPromise();
  objects.forEach(({id, data}) => { /* 保存数据到数组的逻辑 */ });
}

方案2：RxJS 7+版本（toPromise已弃用，用lastValueFrom）

import { lastValueFrom } from 'rxjs';

async ngOnChanges(){
    await getData(); 
    useInformationReceivedFromgetData();
}

async getData(){
  const informations = await lastValueFrom(getInformations());
  
  const subs = informations.map(information => 
    getOtherDetails(information.id).pipe(
      map(data => ({ id: information.id, data }))
    )
  );

  const objects = await lastValueFrom(forkJoin(subs));
  objects.forEach(({id, data}) => { /* 保存数据逻辑 */ });
}

这样修改后，await getData()会真正等待所有请求（包括第一次请求和所有详情请求）完成，之后才会执行后续的useInformationReceivedFromgetData()。

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