在 Angular 中的 get 调用期间，在 RXJS 的外部管道中管道空隙

Question

我注意到我的一些 tap(...) 调用不会记录到控制台，所以我进一步调查并发现内部管道似乎杀死了外部管道。例如，下面的代码将显示 inner 但不会显示 outer.

return this.http.get<{ token: string }>(url)
  .pipe(

    tap(_ => console.log("outer")),

    switchMap(_ => {
      ...
      return of(id);
    }),

    catchError(_ => {

      const urlLocal = url.replace(domainProd, domainDev);
      return this.http.get<{ token: string }>(urlLocal)
        .pipe(

          tap(_ => console.log("inner")),

          switchMap(_ => {
            ...
            return of(id);
          })

        );
    })
  );

我不确定我是否理解如何解释它，也不确定如何从 the docs for tap 中推断出这种行为。据我所知，窃听通过管道发生在调用调用之前，因此发生在检测到任何错误之前。

显然，我弄错了，但我希望看到它以某种方式记录或解释，显然我也没有找到该信息。

至于结构，如果令人惊讶的话，我们在服务器上有一个与外部环境一起工作的环境，如果运行在本地失败，则切换到内部环境。最后，我得到了一个令牌，从中我只能得到 sub，将映射切换为简单字符串并将其作为可观察对象返回。

Answer 1

tap 运算符最多需要 3 个回调。第一个在发出（成功）值的情况下被调用，但在 observable 出错时不会被调用。试试这个作为你的第一个点击运算符：

 tap( 
   result => console.log("outer next", result), 
   err => console.log("outer error", err), 
 )

如果您的第一个 http 调用失败，您应该会在调用 catchError 运算符中的任何代码之前看到“外部错误”日志。

假设您正在学习最新的 RXJS 6，我建议您使用 rxjs.dev 作为您的第一个参考来源。（感谢@DeborahK link）。
您提到的站点 www.learnrxjs.io 有一本很好的入门书，但是一旦您掌握了基本概念，我就会发现它的运算符文档太有限了。官方 rxjs.dev 站点记录了它们的完整界面，也描述了它们在边缘情况下的行为，并且通常提供相似数量的代码示例。

在 Angular 中的 get 调用期间，在 RXJS 的外部管道中管道空隙

Piping inside a pipe voids tapping in the outer one in RXJS during a get call in Angular

angular

typescript

rxjs

angular-httpclient