Угловое объединение данных из нескольких запросов http

Question

Я хочу получить данные для нескольких различных ProductIds из удаленного источника, используя httpClient в угловой службе.Я хочу объединить данные в сервисе и затем вернуть их.

Используя только один идентификатор продукта, это прекрасно работает:

getData(productId: string): Observable<any> {
  const path = this.serverUrl + '?' + 'productId=' + productId;
  return this.httpClient.get(path);
}

Но как я могу перебрать массив идентификаторов продуктова затем вернуть объединенный результат?

getData(productIds: Array<string>): Observable<any> {
  let data: Array<string>;

  productIds.forEach(element => {
     const path = this.serverUrl + '?' + 'productid=' + element;
     data.push(this.httpClient.get(path));
  });

  return data;

}

Спасибо за помощь!

Answer 1

Если вы хотите запросить разные продукты параллельно, вы можете использовать оператор forkJoin:

getData(productIds: Array<string>): Observable<any> {  
  const data = productIds.map(element => {
     const path = this.serverUrl + '?' + 'productid=' + element;
     return this.httpClient.get(path);
  };
  return forkJoin(...data);
}

Answer 2

вы можете попробовать использовать forkJoin

[PS] код ниже не проверен

 let productAPIs = [1,2,3,4];

 productIds.forEach(element => {
    const path = this.serverUrl + '?' + 'productid=' + element;
    productAPIs.push(this.http.get(path);
 });


 forkJoin(productAPIs).subscribe(results => {
    // results[0] is your productId[0]
    // results[1] is your productId[1]
 });

Answer 3

Вы должны взглянуть на функцию zip из RXJS . Он объединяет все результаты из различных наблюдаемых в массив.

getData(productIds: Array<string>): Observable<any> {
  let data: Array<Observable<any>>;

  productIds.forEach(element => {
     const path = this.serverUrl + '?' + 'productid=' + element;
     data.push(this.httpClient.get(path));
  });

  return zip(data);
}