如何避免使用 rxjs 进行嵌套订阅？答案

【问题标题】：How can avoid nested subscribes with rxjs?如何避免使用 rxjs 进行嵌套订阅？
【发布时间】：2022-06-22 17:59:36
【问题描述】：

我有 rxjs 嵌套的 observables，工作正常。

this.service.save(body).subscribe(
   () => {
       this.dialog.confirmDialog({
           title: '',
           message: 'Save okay',
           caption: 'OK'
       })
       .subscribe((yes) => {
            this.service.getGoal().subscribe(
             result => {
                 this.loading(result);
                }
              );
          });
       }
     });

代码做了三件事。首先保存对象，然后弹出一个确认窗口。最后调用服务刷新页面。我在这里使用嵌套订阅。我知道这在理论上不好，我应该用 rxjs 一些地图功能替换它们。但我就是不知道怎么做？

【问题讨论】：

标签： angular rxjs

【解决方案1】：

如果没有嵌套订阅，这应该大致等效：

this.service.save(body).pipe(
  mergeMap(_ => this.dialog.confirmDialog({
    title: '',
    message: 'Save okay',
    caption: 'OK'
  })),
  mergeMap(yes => this.service.getGoal())
).subscribe(result =>
  this.loading(result)
);

【讨论】：

什么是mergeMap(_？我的意思是下划线。
下划线是 jist 一个和其他变量一样的变量，代码忽略它，所以我没有为更具描述性的名称而烦恼。可以改用mergMap(() =>
对于错误处理，您可以在管道中使用catchError 运算符

【解决方案2】：

你应该使用 RxJs 操作符来让你的 observable 流更干净。根据您的用例，一些常见的运算符包括mergeMap、switchMap、map 等

嵌套订阅可能会导致内存泄漏等问题。

【讨论】：

感谢您的评论，我需要代码而不是理论。