Question

我称这个api

https://jokerleb.com/wp-json/wp/v2/ads/

我抓取每个广告的id，然后将其附加到此网址

https://jokerleb.com/wp-json/wp/v2/media?parent=24385

我的代码是

  loadAds() {
    let i = 0;
    this.HttpClient.get(ENV.site_url + ENV.ads_url)
      .subscribe(res => {
        this.ads = this.ads.concat(res);

        this.HttpClient.get(ENV.site_url + ENV.ads_thumb_url + this.ads[i].id + "&&ads/" + this.ads[i].id)
          .subscribe(res => {
            this.items = this.items.concat(res);
            console.log(ENV.site_url + ENV.ads_thumb_url + this.ads[i].id + "&&ads/" + this.ads[i].id);
            i++;
          })
      }
      )
  }

该代码有效，但：

我最终得到两个不同的数组，无法将它们正确合并到一个数组items
我讨厌必须进行两个单独的订阅，但确实可行，但感觉不对

基本上，我想结束一个包含两个端点所有项目的数组。

因此对象id=24385应该返回一个数组

https://jokerleb.com/wp-json/wp/v2/ads/24385

和

https://jokerleb.com/wp-json/wp/v2/media?parent=24385

Answer 1

您需要做的是使用concatMap合并两个列表。例如：

getService1(id1).pipe(
   // take array1 and return [array1, array2]
   concatMap( array1=> return zip(of(array1), getService2(array1[information])))
   // concat Array1 and array2 
   map( [array1, array2] =>  array1.concat(array2))
)
.subscribe( combinedArray => ...)

如果您的服务各自发出一项，则可以将concatMap替换为switchMap，mergeMap或exhaustMap；在这种情况下，它们的行为都相同。此外，您还可以将zip替换为forkJoin。相反，如果您的服务发出的价值超过1，则您将不得不根据自己的需求选择一种表现。

Answer 2

您可以在执行forkJoin的地方将Map切换到第二个呼叫（发送所有呼叫并等待最终的响应数组）

this.HttpClient.get(ENV.site_url + ENV.ads_url).pipe(
  switchMap(res => {
    this.ads = this.ads.concat(res);
    let obs  = this.ads.map(ad => this.HttpClient.get(ENV.site_url + ENV.ads_thumb_url + ad.id + "&&ads/" + ad.id);//create an observable array
      return forkJoin(...obs).pipe(map(res=>res.concat(this.ads)));//map the response with initial array and return concatenated array.
  })
  ).subscribe(finalArray =>{
})

Answer 3

感谢所有回答的人，我要选择一个随机接受的答案，因为他们的回答很棒，我还是这样解决了。

提供者：

  getAds(): Observable<any[]> {
    return this.http.get(ENV.site_url + ENV.ads_url)
      .flatMap((ads: any[]) => {
        if (ads.length > 0) {
          return Observable.forkJoin(
            ads.map((ad: any) => {
              return this.http.get(ENV.site_url + ENV.ads_thumb_url + ad.id)
                .map((res: any) => {
                  let media: any = res;
                  ad.media = media;
                  return ad;
                });
            })
          );
        }
        return Observable.of([]);
      });
  }

提供者是

Home.ts

 ngOnInit() {
    this.adsProvider.getAds().subscribe((data: any) => {
      this.items = data;
    });
  }

贷记this article: Combining Observables in series and in parallel

带有参数的带有RxJS的多个HTTP请求

3 个答案: