Angular 使用RxJS和参数的多个HTTP请求

我称之为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++;
          })
      }
      )
  }

该准则有效，但：

• 我最终得到了两个不同的数组，我无法将它们正确地合并到一个数组

  项中

• 我讨厌这样的事实，我必须做两个单独的订阅，它的工作，但它感觉是错误的

基本上，我希望最终得到一个数组，其中包含来自两个端点的所有项

所以object

id=24385

应该返回

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

及

---

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

您需要做的是使用

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

或

defaustmap

；在这种情况下，它们的行为都是一样的。此外，您还可以将

zip

替换为

forkJoin

。相反，如果您的服务发出超过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

或

defaustmap

；在这种情况下，它们的行为都是一样的。此外，您还可以将

zip

替换为

forkJoin

。相反，如果您的服务发出超过1个值，那么您必须选择一个根据您的需要运行的值

您可以切换到第二个调用，在这里您可以执行

forkJoin

（发送所有调用并等待最终的响应数组）

---

您可以切换到第二个调用，在该调用中执行

forkJoin

（发送所有调用并等待最终的响应数组）

---

感谢所有回答的人，我将随机选择一个被接受的答案，因为他们都很优秀，我就是这样解决的

提供者：

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

---

感谢所有回答的人，我将挑选一个随机接受的答案，因为他们都很优秀，不过我是这样解决的

提供者：

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

---

从我在这里看到的情况来看。。。你得到一个id数组，你想用每个id调用另一个url吗？@SurajRao yes，然后将第一个请求的结果与第二个请求的结果合并，这样我就可以在视图中迭代一个数组，从这里看到的内容。。。你得到了一个id数组，你想用每个id调用另一个url？@SurajRao yes，然后将第一个请求的结果与第二个请求的结果合并，这样我就可以在视图中迭代1个数组了，当时正在考虑switchMap和forkJoin。。。有什么原因zip更好吗？Forkjoin不起作用，在调用第二个服务之前，您需要第一个服务的结果。如果您的服务发出一个值，switchMap、concatMap、defaustmap和mergeMap将起作用，并且是等效的。来自switchMap的第二个调用将是forkJoinYes forkJoin（of（array1），service2）看起来是OK的，当时正在考虑switchMap和forkJoin。。。有什么原因zip更好吗？Forkjoin不起作用，在调用第二个服务之前，您需要第一个服务的结果。switchMap、concatMap、exhaustMap、mergeMap可以工作，如果您的服务发出一个值，则它们是等效的。来自switchMap的第二个调用将是forkJoinYes forkJoin（of（array1），service2）看起来OK问题是

this.HttpClient.get（ENV.site\u url+ENV.ads\u thumb\u url+ad.id+“&&ads/”+ad.id））

将仅返回图像，您可以在此处检查

https://jokerleb.com/wp-json/wp/v2/media?parent=24408&&ads/24408

这正是我试图做的，但无法在url中将两者结合起来。正如您所看到的，您获得的数组只显示缩略图，没有关于广告标题、城市、电话等的信息。etcI昨天试图做类似的事情，但被卡住了。看起来您可能必须检查api才能从中获取所需的数据。问题是

this.HttpClient.get（ENV.site_url+ENV.ads_thumb_url+ad.id+“&&ads/”+ad.id））

将仅返回图像，您可以在此处检查

https://jokerleb.com/wp-json/wp/v2/media?parent=24408&&ads/24408

这正是我试图做的，但无法在url中将两者结合起来。正如您所看到的，您得到的数组只显示缩略图，没有关于广告标题、城市、电话等的信息。昨天，etcI试图做类似的事情，但被卡住了。看起来您可能需要检查api，以便从中获取所需的数据。