Как отправить в цикле несколько api запросов на angular?

В Angular есть несколько способов отправить несколько API запросов в цикле. Один из таких способов - использовать функцию forkJoin из библиотеки RxJS.

forkJoin объединяет несколько Observable-объектов и возвращает один Observable, который испускает массив результатов, когда все переданные Observable завершаются. В нашем случае мы будем использовать forkJoin для объединения нескольких API запросов.

Прежде чем приступить к коду, нам необходимо установить RxJS и импортировать forkJoin из него. Выполните следующую команду в командной строке, чтобы установить RxJS:

npm install rxjs

После установки RxJS мы можем использовать forkJoin в нашем коде. Рассмотрим следующий пример:

import { forkJoin, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class ApiService {
  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    const urls = ['url1', 'url2', 'url3']; // Список URL-адресов для запросов

    const requests = urls.map(url => this.http.get(url)); // Создаем массив запросов

    return forkJoin(requests); // Объединяем запросы и возвращаем Observable
  }
}

@Component({ ... })
export class MyComponent {
  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    this.apiService.getData().subscribe(data => {
      // Обработка полученных данных
      console.log(data);
    });
  }
}

В этом примере мы создаем сервис ApiService, который имеет метод getData(). В этом методе мы создаем массив запросов requests, используя функцию map для итерации по массиву URL-адресов и выполняем GET-запросы с помощью Angular HttpClient.

Затем мы используем forkJoin, чтобы объединить все запросы и вернуть один Observable. В компоненте MyComponent, мы вызываем метод getData() из сервиса ApiService и подписываемся на получение данных. Когда все запросы завершатся, вызывается функция subscribe, в которой мы можем обрабатывать полученные данные.

В итоге, данный код позволяет отправлять несколько API запросов в цикле и объединять результаты этих запросов в одном Observable.