使用 Angular 和 Rxjs 处理多个 HTTP 请求并返回结果

Question

我目前面临着向一堆 url [50 of em] 发送 GET 请求到 Spotify 服务器，然后在单个 Observable/array/object 中返回它们的结果的挑战。

我想出的当前代码：

curatedTopArtistTracks(artistIds) {
    let responseStore = [];
    for (let [index, artistId] of artistIds.entries()) {

      let baseURL = `https://api.spotify.com/v1/artists/${artistId}/top-tracks?country=US`;

      let response = this.http.get<any>(baseURL, { headers: this.customHeaders });

      response.subscribe(
        res => {
          responseStore.push(res.tracks);
        },
        error => {
          console.log('ERROR IN GETTING RESPONSE : INDEX : ', index);
        }
      );
    }
return responseStore;
  }

网址是： https://api.spotify.com/v1/artists/${artistId}/top-tracks?country=US : ${artistId}其中${artistId}是动态的，有 50 个artistId 。

我的理解

虽然该函数帮助我发送适当的请求并且我得到 200 ok 响应，但明显的问题是 for 循环不会等到 HTTP 请求得到解决并返回一个未定义的responseStore 。

我已经了解了ForkJoin and mergemap in Rxjs的一些概念，并提出了以下代码：

前任：

  curatedTopArtistTracks(artistIds): Observable<any> {
    let responseStore = [];
    for (let [index, artistId] of artistIds.entries()) {
      let baseURL = `https://api.spotify.com/v1/artists/${artistId}/top-tracks?country=US`;
      const requestURL = this.http.get(baseURL);
      responseStore.push(requestURL);
    }
    return forkJoin(responseStore);
  }

但是，上面的代码甚至没有开始获取响应，因为我猜是因为我将 url 推入数组而 forkjoin 无法识别它。

关于如何实现上述目标的任何见解都会有所帮助！

更新

正如@martin 在下面的评论中提到的，我没有订阅该服务，而且当我订阅时它运行良好。

如下 ：

let response = this.service.curatedTopArtistTracks(artistArray).subscribe(
      res => {
        console.log('RESPONSE : ', res);
      },
      error => {
        console.log('error : ', error);
      }
    )

Answer 1

像这样尝试：

return request1().pipe(
  mergeMap(res1=> request2(res1.id).pipe(
    map(res2=> {
      return {
        res1: res1,
        res2: res2
      }
    })
  ))
)