来自 Observable 输出的 RxJS Observable 结果答案

【问题标题】：RxJS Observable result from an Observable's output来自 Observable 输出的 RxJS Observable 结果
【发布时间】：2020-01-10 16:09:41
【问题描述】：

我有一个 Angular 8 应用程序，它使用两层来存储数据：StorageService 抽象出实际的 HTTP 服务调用，而它本身不包含各种数据类型的 get 和 save 之外的其他方法。

BookmarkService 等其他服务使用 StorageService 并实现更复杂的业务逻辑，例如添加新的书签文章。

问题是，我们可能需要调用StorageService 两次，加载数据然后保存。

我想将潜在的错误正确地暴露给调用者站点，我想知道在完全不引入 RxJS Subject 对象的情况下实现这样的事情的最佳解决方案是什么。例如，有没有办法仅通过管道来实现这一点？有人可以给我一个关于如何正确实现这种模式的例子吗？

export class BookmarkService {

  constructor(private storageService: StorageService) {}

  addArticleToBookmarks(article: Article): Observable<SaveResponse> {

    this.storageService.getBookmarkedArticles().subscribe(articles =>

      articles.push(article);

      this.storageService.saveBookmarkedArticles(articles).subscribe(saveResponse => ...)

    });

    // want to return an Observable of saveResponse, if getBookmarkedArticles completed, 
    // or the error output of getBookmarkedArticles if it failed
    return ...

  }

【问题讨论】：

rxjs-dev.firebaseapp.com/api/operators/switchMap

标签： angular rxjs observable

【解决方案1】：

您可以使用switchMap 或mergeMap（也称为flatMap）运算符。

下面是关于两者区别的一个很好的解释：https://javascript.tutorialhorizon.com/2017/03/29/switchmap-vs-flatmap-rxjs/

使用switchMap的示例：

    addArticleToBookmarks(article: Article): Observable<SaveResponse> {
        return this.storageService.getBookmarkedArticles().pipe(
            switchMap(articles => {
                articles.push(article);
                return this.storageService.saveBookmarkedArticles(articles)
            })
        );
    }

我还没有测试过，但我很确定，这会奏效

【讨论】：

【解决方案2】：

你的意思是这样的吗？

addArticleToBookmarks(article: Article): Observable<SaveResponse> {

  this.storageService.getBookmarkedArticles()
  .pipe(
    catchError(err => console.error(err))
    switchMap(articles => {
      articles.push(article);
      return this.storageService.saveBookmarkedArticles(articles);
    }
  ).subscribe(saveResponse => ...)

}

【讨论】：