代码之家 › 专栏 › 技术社区 › Lynob

使用rxjs和参数的多个HTTP请求

ionic3 rxjs ionic-framework angular

Lynob · 技术社区 · 6 年前

我叫这个API

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

我抓住了 id 每个广告,然后我把它附加到这个URL

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
我讨厌我必须做两个单独的订阅,这是可行的,但感觉不对

基本上,我希望以一个包含两个端点的所有项的数组结束。

SO对象 id=24385 应返回一个数组

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

和

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

3 回复 | 直到 6 年前

madjaoue 6 年前

你需要做的是用 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 => ...)

如果您的服务每个发出一个项目,则可以替换 浓度图 具有 switchMap , mergeMap 或 exhaustMap 在这种情况下,他们的行为都是一样的。此外,您还可以替换 zip 具有 forkJoin . 相反,如果您的服务发出超过1个值,则必须根据需要选择一个行为的值。

Suraj Rao Raas Masood 6 年前

你可以把地图切换到第二个电话 forkJoin (发送所有调用并等待最终的响应数组)

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 =>{
})

Lynob 6 年前

谢谢所有回答的人,我会选择一个随机接受的答案,因为他们很优秀,不过我还是这样解决了。

供应商:

  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([]);
      });
  }

供应商是

主页.ts

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

贷款给 this article: Combining Observables in series and in parallel