如何在没有嵌入式订阅的情况下执行一个又一个异步操作

Posted 2023-02-22

【中文标题】如何在没有嵌入式订阅的情况下执行一个又一个异步操作

【英文标题】：How to perform one async action after another without embedded subscriptions

【发布时间】：2020-05-19 10:24:51

【问题描述】：

我想使用 rxjs 一个接一个地执行异步操作。我知道在 subscribe 中嵌入 subscribe 不是一个好习惯，还有其他一些 rxjs 运算符（flatMap\mergeMap、do 等使用 pipe）。

我需要获取组件查询参数，设置一个全局变量 (globalVar)，然后然后，继续下一个异步操作 (this..doSomething())。 这是我使用嵌入式订阅的代码： *doSomething 返回一个可观察对象

this.route.paramMap.subscribe(params => 
     
      globalVar = + params['userId']; 
      this.<someService>.doSomething().subscribe(result => 
      
        this.func1();
      );
    

【参考方案1】：

Async/await 是一种让您的代码可读的方法，因为它可以按顺序读取。在我也尝试在几个级别上嵌入 observable 之后，这是我的首选路线。

【参考方案2】：

switchMap 运算符是您想要链接多个 observable 的完美解决方案。

this.route.paramMap
    .pipe(
      switchMap(params) => 
      globalVar = + params['userId']; 
      return this.<someService>.doSomething()
    )
    .subscribe(result=> this.func1();)

switchMap 将做的事情是在从this.route 获取参数后，它将返回一个新的 observable，您可以稍后订阅它。在这种情况下使用switchMap 的好处是，如果在处理this.<someService>.doSomething() 时this.route.paramMap 内部发生变化，rxjs 将终止正在处理的请求并开始新的请求，这样做会在 subscribe 中的strong>结果 将始终与paramMap 的当前值相关。

【参考方案3】：

this.route.paramMap.pipe(
  switchMap(params => 
    globalVar = + params['userId'];
    return this.<someService>.doSomething().pipe(
      tap(() => this.func1())
    )
  )
).subscribe();

【讨论】：

口头解释通常也很有帮助