angular - 使用带有 Angular 的 rxjs .subscribe 防止厄运金字塔 - 压平 .subscribes 的数量

Question

我目前正在调查 RxJS's .merge但是我也会在这里问这个问题，因为我发现这里的解释有时非常精彩。

好的，我有一个根据用户输入打开模态窗口的表单，我订阅模态关闭事件并传回一些我将在调用/订阅服务方法以检索一些数据后使用的数据，然后当发生这种情况时，我再次执行相同的操作并调用/订阅另一个服务方法来更新某个日期，然后当这完成时我运行一个本地方法。所以我这里有 3 个嵌套的 .subscribe

const dialogRef = this.matDialog.open(ModalWindowComponent, {});
let userId = 4; // this is the real world is selected by the user
let userData = {}; // this is actually form data created by the user

// dialog is closed
dialogRef.afterClosed().subscribe((result) => {
  if (typeof result === 'string') {
     // subscribe to a service to get some data
     this.userService.getUser(userId).subscribe((user: any) => {
        // do something with the data
        let mergedObj = Object.assign({}, user, {newProperty: result});
          // subscribe to another service to update the data
          this.scbasService.updateUser(userId, mergedObj).subscribe(() => {
             this.doSomethingElse(userData); 
      });
    });
  }
});

我这里有一个“厄运金字塔”。我记得在使用 AngularJS 并使用 promises 时，我可以返回下一个服务并链接 .then()。我真的很想扁平化我的代码，有什么想法吗？

我怎样才能在这里做同样的事情，这样我的代码就不会不断缩进？

如果我没有很好地提问或解释自己，请说出来，我会重新表述我的问题。

Answer 1

你可以这样做:

dialogRef
  .afterClosed()
  .filter(result => typeof result === 'string')
  .mergeMap(result => this.userService
    .getUser(userId)
    .mergeMap(user => {
      let mergedObj = Object.assign({}, user, { newProperty: result });
      return this.scbasService.updateUser(userId, mergedObj);
    })
  )
  .do(() => this.doSomethingElse(userData))
  .subscribe();

• 使用 filter 以便只处理 string 结果。
• 使用 mergeMap 为 getUser 和 updateUser 调用组成一个内部可观察对象。
• 再次使用 mergeMap 将内部 observable 合并到外部 observable。
• 在用户更新后使用do 做一些事情。
• 并调用订阅。否则，什么也不会发生。

需要记住的一点是，在 subscribe 调用中嵌套 subscribe 调用是一种反模式。

如果需要，您可以进一步展平它，使用第一个 mergeMap 中的结果选择器添加属性:

dialogRef
  .afterClosed()
  .filter(result => typeof result === 'string')
  .mergeMap(
    result => this.userService.getUser(userId),
    (result, user) => Object.assign({}, user, { newProperty: result })
  )
  .mergeMap(
    userWithNewProperty => this.scbasService.updateUser(userId, userWithNewProperty)
  )
  .do(() => this.doSomethingElse(userData))
  .subscribe();