Как объединить несколько вызовов API в массив Observable из массива некоторых значений? - PullRequest
Новая
       32

Как объединить несколько вызовов API в массив Observable из массива некоторых значений?

0 голосов
/ 01 июля 2019

Я работаю над формой, приведенной ниже: enter image description here Форма состоит из трех подформ:
- Форма PersonInfo
- Форма информации о связи
- Адресная форма

DTO, который я создал для формы, выглядит следующим образом: 

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

Но остальная конечная точка, для которой создана эта форма, принимает полезную нагрузку, подобную этой: 

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

Итак, рабочий процесс для создания этой формы примерно такой.
Шаг 1: Получить информацию из формы.
Шаг 2. Извлечение AddressInfo, информации о связи и личной информации из ответа формы.
Шаг 3: Теперь из Личной информации сделайте почтовый звонок, и он вернет profileId в качестве ответа.
Шаг 4: Создайте запись адреса с ID профиля, который вы получили в ответе с последнего Шаг 3.
Шаг 5: Создайте запись связи с ID профиля, который вы получаете с Шаг 3.
Шаг 6: Создайте связанную запись с profileId, полученным в ответ от , шаг 3.

Итак, чтобы получить одну форму, мне нужно сделать 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

1 Ответ

1 голос
/ 01 июля 2019

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>
...