如何将 Observable<Observable<any>> 展平为 Observable<any>？答案

【问题标题】：How to flatten an Observable<Observable<any>> to Observable<any>?如何将 Observable<Observable<any>> 展平为 Observable<any>？
【发布时间】：2018-06-07 11:31:31
【问题描述】：

我正在尝试通过执行以下操作来获得Observable<MyType>：

return this.cache.get<MyType, number>(storageName, version)
    .map(cached => {
        if (cached !== undefined) {
            return cached;
        }
        return this.http.get<MyType>(`MyTypeGetUrl/${version}`)
            .map(m => m)
            .do(result => {
                this.cache.put<MyType>(storageName, result).first().subscribe();
            });
        }).publishReplay(1).refCount();

cache.get 返回 Observable<MyType>，http.get<T> 返回 Observable<T>。

我要检查缓存中的对象，如果不存在，从服务器获取，缓存并返回。

但是，如果对象存在于缓存中，则返回Observable<MyType>，但如果需要去服务器，则返回Observable<Observable<MyType>>。

如何将服务器的结果展平，这样我就可以返回一个 Observable，只有在必须时才调用服务器？

【问题讨论】：

标签： rxjs observable rxjs5

【解决方案1】：

使用 mergeMap 代替 map 并将缓存的结果包装到 Observable 中。在这两种情况下，它都会经过mergeMap，因此它会将Observable<MyType> 解包为MyType（在此示例中您也可以使用concatMap 或switchMap）。

return this.cache.get<MyType, number>(storageName, version)
  .mergeMap(cached => {
    if (cached !== undefined) {
      return Observable.of(cached);
    }
    return this.http.get(...);
  })
  ...

【讨论】：

【解决方案2】：

你可以像这样使用 mergeMap 和 Observable.of：

return this.cache.get<MyType, number>(storageName, version)
    .mergeMap(cached => {
        if (cached !== undefined) {
            return Observable.of(cached);
        }
        return this.http.get<MyType>(`MyTypeGetUrl/${version}`)
            .map(m => m)
            .do(result => {
                this.cache.put<MyType>(storageName, result).first().subscribe();
            });
        }).publishReplay(1).refCount();

【讨论】：