Angular Rx JS объединяет несколько зависимых запросов GET при возврате первого запроса

Question

Допустим, у меня есть ученик с двумя свойствами: courseIds, курсы.

export interface IStudent {
  courseIds: number[];
  courses: ICourse[];
}

export interface ICourse {
  name: string;
}

Когда страница загружается, я выдаю запрос GET, чтобы получить ученика, в котором заполнены только идентификаторы курсов. Затем я хочу проверить эти идентификаторы и сделать неизвестное число дополнительных запросов GET к другой конечной точке для извлечения его курсов.
В конце я хочу получить объект Student с заполненным массивом Courses.

Я получил это далеко:

httpClient.get<IStudent>(url)
  .pipe(
    map(student => {
      const validIds = [];
      student.courseIds.forEach(id => {
        if (isValid(id)) {
          validIds.push(id);
        }
      }
      return validIds;
    }),
    ???
  ).subscribe(
    ???
  );

Знаки вопроса указывают, где я застрял. Как я могу реализовать это с помощью Observables?

Answer 1

В вашем канале вы можете map и отфильтровать действительные идентификаторы перед использованием switchMap и forkJoin, чтобы получить обратно массив ICourse.

httpClient.get<IStudent>(url)
  .pipe(
    map(student => student.courseIds.filter((id: number) => isValid(id))),
    switchMap((ids: number[]) => forkJoin(ids.map(id => httpClient.get<ICourse>(id))))
  )
  .subscribe({
    next: (data: ICourse[]) => {
      /* use your course array */
      console.log(data)
    },
    error: (error) => console.log(error),
  }
);

Возможно, вы захотите разделить http классы обслуживания, так что у вас есть чистые «получает» и делать сшивки в классе обслуживания компонента. Тогда вам просто нужно подписаться или использовать канал asyn c в компоненте.

Пример StackBlitz