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

Question

我目前面临着发送 GET 请求的一堆 url [50 of em] 到 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}是动态的，有 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
      }
    })
  ))
)