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

Question

我正在处理下面给出的表格： 表单由三个子表单组成：
- 个人信息表格
- 通讯资料表
- 地址表格

我为表单创建的 DTO 如下所示：

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

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

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

所以创建此表单的工作流程是这样的。
第 1 步：从表单中获取信息。
第 2 步：从表单响应中提取地址信息、通信信息和个人信息。
第 3 步：现在从个人信息发出一个电话后，它会返回 profileId 作为响应。
第 4 步：使用您在上一个第 3 步的响应中获得的 profileId 创建地址记录。
第 5 步：使用您从第 3 步获得的 profileId 创建一个通信记录。
第 6 步：使用从 第 3 步获得的 profileId 创建链接记录。

因此，为了获得一个表单，我必须对不同的端点进行 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。 然后将这个 PersonalInformationEmergencyEditorresponse 推送到一个数组中。

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>