Несколько вызовов API в зависимости от размера страницы в Angular

Question

Вызов API - getList() => возвращает 1000 чисел

• Скажем 1,2,3...1000

Сделайте 20 вызовов API, получив более 20 лучших результатов

Я пытаюсь сделать что-то подобное

this.http.get('urlService').mergeMap((ids: number[]) => this.getItems(ids.slice(0, 20))).
  subscribe(newsList => {
    this.dataRecieved.next(newsList);
  })

Но это как-то не работает

Answer 1

Вы можете использовать RxJS forkJoin функция для объединения нескольких HTTP-запросов. Он сработает только тогда, когда все наблюдаемые будут завершены.

this.http.get('urlService').pipe(
  switchMap((ids: number[]) => forkJoin(ids.slice(0, 20).map(id => this.getItems(id))))
).subscribe(newsList => {
  // newsList[0] - response from `this.getItems(1)`
  // newsList[1] - response from `this.getItems(2)`
  ...
  this.dataRecieved.next(newsList);
});

Я использую массив map функция для преобразования списка [1, 2, ..., 20] к списку HTTP-запросов [this.getItems(1), this.getItems(2), ..., this.getItems(20)].

---

Однако имейте в виду, что это вызовет 20 одновременных HTTP-вызовов. Большинство браузеров имеют жесткое ограничение (Chrome - 6) на количество одновременных вызовов одного и того же домена. Рекомендуемый способ решить эту проблему с ограничениями - использовать WebSockets или сегментирование домена.

В качестве обходного пути из внешнего интерфейса вы можете использовать RxJS bufferCount оператор с from функция для управления максимальным количеством параллельных запросов, выполняемых одновременно.

this.http.get('urlService').pipe(
  switchMap((ids: number[]) => from(ids.slice(0, 20).map(id => this.getItems(id)))),
  bufferCount(6),                         // <-- adjust number of parallel requests here
  concatMap(buffer => forkJoin(buffer))
).subscribe(
  newsList => this.dataRecieved.next(newsList),
  error => // handle error
);