如何将多个API调用从一些值的数组组合到Observable数组中？

Question

我正在处理以下表格： 表格由三个子表格组成：
-PersonInfo表格
-交流信息表
-地址表

我为表单创建的DTO看起来像这样：

PersonalInformationEmergencyEditorresponse {
  address : AddressCreateDto[];
  communicationInfo : CommunicationCreateDto[];
  profileInfo: PersonProfileCreateDto;
}

但是为其创建此表单的其余端点接受这样的有效负载：

export interface PersonToPersonLinkCreateDto {
  emergencyContact: boolean;
  linkedPersonId: string;
  relation: string;
}

因此创建此表单的工作流程是这样的。
第1步：从表单中获取信息。
步骤2：从表单回复中提取AddressInfo，通讯信息和个人信息。
第3步：现在，在“个人信息”中进行呼叫，它将返回profileId 作为响应。
第4步：使用您从上一个第3步得到响应的profileId创建地址记录。
第5步：使用从第3步获得的profileId创建通信记录。
第6步：使用第3步得到的配置文件ID创建链接记录。

因此，为了使用一种表单，我必须对不同的端点进行4个API调用。

此外，可能有多个记录，这意味着我可以拥有上述这些形式的数组。

我能够处理此部分，但令我感到困惑的部分是当我确实会被要求显示表单信息的时候。

我将获得以下数组作为响应：

export interface PersonToPersonLinkCreateDto {
  emergencyContact: boolean;
  linkedPersonId: string;
  relation: string;
}

现在为了再次在表格中填写信息，我必须进行以下调用

// For each EmergencyContact
({linkedPersonId} :  PersonToPersonLinkCreateDto[]).map (
   // fetch PersonalInfo
  this.personalInfoApiService.get(linkedPersonId)
   // fetch Address
  this.personlInfoApiService.getAddress(linkedPersonId)
  // fetch Communication Info
  this.personalInfoApiService.getCommunicationInfo(linkedPersonId)
)

因此，对于每个处于紧急联系状态的人员，我必须获取相应的记录，然后将其重新放入此表单中，以便我可以将其修补到该表单上。

PersonalInformationEmergencyEditorresponse {
  address : AddressCreateDto[];
  communicationInfo : CommunicationCreateDto[];
  profileInfo: PersonProfileCreateDto;
}

我想知道的是如何编写一个函数，该函数将遍历EmergencyContacts数组，并逐项进行3个API调用，然后将所有端点的响应映射到PersonalInformationEmergencyEditorresponse。 然后将此PersonalInformationEmergencyEditor响应推送到一个数组中。

getEmergencyContactResponse(emergencyContacts: PersonToPersonLinkCreateDto[]) :  
 PersonalInformationEmergencyEditorresponse[] {

// Function Here 
// Iterate Over PersonToPersonLinkCreateDto Array
// Make call to AddressEndpoint
// Make call to CommunicationEndpoint
// Make call to PersonInfoEndpoint
// Map response of all API calls into an Object and then push it into an Array
}

I don't know exactly how to iterate and make calls and then combine the result of calls into an Object and then push them into an Array.

Please let me know if there is any ambiguity in question I will clarify

Answer 1

forkJoin和mergeMap应该可以完成任务...

const { mergeMap } = rxjs.operators;
const { forkJoin, Subject, from } = rxjs;

const fetchPersonalInfo = (person) => Promise.resolve(`${person.id} personal info loaded`);
const fetchCommunicationInfo = (person) => Promise.resolve('communication info loaded');
const fetchAddress = (person) => Promise.resolve('address loaded');

const persons$ = new Subject();

persons$.pipe(
  // flatten the list of persons
  mergeMap(list => list),
  
  // for each person fork requests and join responses
  mergeMap(
    (person) => forkJoin({
      personalInfo: fetchPersonalInfo(person),
      communicationInfo: fetchCommunicationInfo(person),
      address: fetchAddress(person),
    }),
  ),
).subscribe(console.log);

persons$.next(
  [
    {
      id: 1,
      address: [],
      communicationInfo: [],
      profileInfo: {},
    },
    {
      id: 2,
      address: [],
      communicationInfo: [],
      profileInfo: {},
    },
    {
      id: 3,
      address: [],
      communicationInfo: [],
      profileInfo: {},
    }
  ]
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js" integrity="sha256-mNXCdYv896VtdKYTBWgurbyH+p9uDUgWE4sYjRnB5dM=" crossorigin="anonymous"></script>