Angular中订阅HttpClient.get Observable两次为何触发两次请求？

这事儿的核心原因很直接：HttpClient返回的是「冷Observable」，这是RxJS里Observable的核心特性之一。

冷Observable的本质是，每一次调用subscribe()方法，都会从头完整执行一遍Observable内部的逻辑。对于HttpClient.get来说，它内部的逻辑就是发起一次HTTP请求——所以你订阅几次，就会触发几次请求，这完全对应你看到的「每次调用subscribe()，登录页面就新增一条请求记录」的现象。

结合你的场景来看：你的LogonService里处理登录时，每次调用登录函数都会去订阅这个Observable，如果不小心触发了两次登录逻辑（比如按钮点击事件绑定重复、或者同一个Observable被不同组件/逻辑订阅了两次），自然就会发起两次HTTP请求。

怎么解决这个问题？ #

这里给你几个实用的方案，适配不同的场景：

方案1：用shareReplay()共享请求结果（最推荐）

这是处理HTTP请求重复订阅最常用的方式，通过shareReplay()操作符把冷Observable转换成「可复用的Observable」——它只会发起一次请求，后续的订阅都会直接复用之前缓存的结果。

在你的LogonService里可以这么写：

import { shareReplay } from 'rxjs/operators';

// 提前定义好共享的登录请求Observable
private loginRequest$ = this.http.get('/your-login-api').pipe(
  shareReplay(1) // 缓存最近1次请求结果
);

// 登录方法
login() {
  this.loginRequest$.subscribe(
    (response) => {
      // 更新登录状态
      this.isLoggedIn = true;
    },
    (error) => {
      // 处理登录失败逻辑
      console.error('登录失败:', error);
    }
  );
}

这样不管你调用多少次login()，或者在多个地方订阅loginRequest$，都只会发起一次HTTP请求。

方案2：手动缓存请求结果

如果你的登录逻辑只需要执行一次，也可以直接把请求结果缓存到变量里，避免重复发起请求：

private loginResponse: any;
private isRequesting = false; // 标记请求是否正在进行

login() {
  // 已登录或请求中直接返回，避免重复操作
  if (this.isLoggedIn || this.isRequesting) return;

  this.isRequesting = true;
  this.http.get('/your-login-api').subscribe(
    (response) => {
      this.loginResponse = response;
      this.isLoggedIn = true;
      this.isRequesting = false;
    },
    (error) => {
      this.isRequesting = false;
      console.error('登录失败:', error);
    }
  );
}

这种方式更直观，适合对RxJS操作符不太熟悉的场景。

方案3：检查代码中的重复订阅

最后别忘了排查一下你的代码：是不是在onSubmit()方法里不小心调用了两次登录函数？或者同一个Observable被不同的地方（比如组件和服务）分别订阅了？找到重复订阅的根源，也是解决问题的关键。

内容的提问来源于stack exchange，提问作者Rico