Angular 2可观察订阅两次执行调用两次

Question

问题
我订阅了两次可观察到的 httpClient.get。但是，这意味着我的调用被执行了两次。这是为什么？

证明
对于我执行的每个 subscribe()，我都会在登录页面中得到另一行。

代码(来自登录页面按钮的 onSubmit())

var httpHeaders = new HttpHeaders()
  .append("Authorization", 'Basic ' + btoa(this.username + ':' + this.password));

var observable = this.httpClient.get('api/version/secured', { headers: httpHeaders});
observable.subscribe(
  () => {
    console.log('First request completed');
  },
  (error: HttpErrorResponse) => {
    console.log('First request error');
  }
);
observable.subscribe(
  () => {
    console.log('Second request completed');
  },
  (error: HttpErrorResponse) => {
    console.log('Second request error');
  }
);

控制台

zone.js:2935 GET http://localhost:4200/api/version/secured 401 (Unauthorized)
login.component.ts:54 First request error
zone.js:2935 GET http://localhost:4200/api/version/secured 401 (Unauthorized)
login.component.ts:62 First request error

无关背景
我有一个 LogonService 对象来处理我的所有登录功能。它包含一个 bool 变量，显示我是否登录。每当我调用登录函数时，它都会订阅 httpClient.get 的可观察对象，以将登录变量设置为 true 或 false。但是登录函数也返回被订阅的可观察对象。我花了一些时间将双重请求与双重订阅联系起来。如果有比通过变量跟踪登录更好的方法，请告诉我!我正在尝试学习 Angular :)

Answer 1

您可以使用 share HttpClient.get 结果的运算符，如下所示:

var observable = this.httpClient.get('api/version/secured', { headers: httpHeaders })
  .pipe(share());

您需要在脚本之上添加以下导入:

import { share } from 'rxjs/operators';

share 运算符使一个可观察的hot，即在订阅者之间共享。但还有更多内容，我建议 this article深入研究(您当然也可以通过谷歌搜索 hot vs cold observables 来查找更多信息)。