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

Question

I am currently facing a challenge on sending GET request for a bunch of urls [50 of em] to spotify server and then return their result in a single Observable/array/object.

current code that I came up with :

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;
  }

The url is : https://api.spotify.com/v1/artists/${artistId}/top-tracks?country=US where ${artistId} is dynamic and there are 50 artistId .

MY UNDERSTANDINGS

While the function helps me to send appropriate requests and i am getting 200 ok response but the Obvious problem is that the for loop doesn't wait until the HTTP requests are resolved and returns an undefined responseStore .

I have gone through a few concepts of ForkJoin and mergemap in Rxjs and came up with below code:

Ex:

  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);
  }

But , the above code doesn't even start fetching for response, cause i guess because of i am pushing url into array and forkjoin doesnt recognize it.

Any insight on how I can achieve the above would be helpful!

UPDATE

As @martin mentioned in the below comment, I was not subscribing to the service and it works fine when I do.

As follows :

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

Answer 1

Try like this:

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