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

【问题标题】：Conditionally merge rxjs array responses into a single array有条件地将 rxjs 数组响应合并到单个数组中
【发布时间】：2018-07-16 09:51:54
【问题描述】：

在我的 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 个播放列表。

我想扩展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/

【问题讨论】：

我怀疑这是最快的方法，但您可以对下一个对象进行递归检查。另一种方法是先对两个查询进行 forkjoin，请求偏移量 0 和偏移量 50（参见 API），然后检查第二个查询是否返回结果。

标签： angular typescript rxjs spotify

【解决方案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));

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.1.0/Rx.js"&gt;&lt;/script&gt;

为了更好地理解.map() 和.mergeMap() - 请查看question 和answer

【讨论】：