Question

在Angular 6服务中，我采用以下方法从Spotify Web API获取当前用户的前50个播放列表：

getPlaylists(accessToken: string): Observable<Playlist[]> {
  const httpOptions = {
    headers: new HttpHeaders({
      'Authorization': `Bearer ${accessToken}`
    })
  };

  return this.httpClient.get<Playlist[]>('https://api.spotify.com/v1/me/playlists?limit=50', httpOptions)
    .pipe(map((response: any) => response.items));
}

如果当前用户只有50个或更少的播放列表，此方法就足够好了。

但是，如果用户的播放列表超过50个，Spotify Web API会将单个响应中的播放列表的数量限制为50个，而response对象包含一个next属性，即端点请求下一个50个播放列表的URI。

我想扩展getPlaylists函数以获取用户的播放列表的全部，即：只要response对象包含有效的next属性，我想继续向其包含的URI发送GET请求，并最终合并所得的response.items数组，以便该函数返回单个Observable<Playlist[]>。

我该怎么做？

谢谢！

编辑：我正在使用的Spotify Web API端点是https://developer.spotify.com/documentation/web-api/reference/playlists/get-a-list-of-current-users-playlists/

Answer 1

您可以使用.mergeMap()来帮助您将高阶Observable展平为单个流。

Hello World的简单示例

//emit 'Hello'
const source = Rx.Observable.of('Hello');
//map to inner observable and flatten
const example = source.mergeMap(val => Rx.Observable.of(`${val} World!`));
//output: 'Hello World!'
const subscribe = example.subscribe(val => console.log(val));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.1.0/Rx.js"></script>

要更好地理解.map()和.mergeMap()之间-选中此question和answer

有条件地将rxjs数组响应合并到单个数组中

1 个答案: