Angular开发中HttpClient的post请求未触发问题求助

问题根因 #

Angular 中 HttpClient 所有请求方法返回的都是冷 Observable，只有主动对该 Observable 进行订阅，才会触发实际的 HTTP 请求。你当前的代码仅完成了请求逻辑的定义，没有对 this.http.post 返回的 Observable 做订阅操作，因此 POST 请求不会发送。

修复代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { tap } from 'rxjs/operators';

import { User } from './user';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  
  private signinuser = new BehaviorSubject<User>(null);
  CurrentUser = this.signinuser.asObservable();
  
  constructor(private http: HttpClient) 
  {}

  signin (username : string, password :string) 
  {
    console.log(`Get username : ${username} - 1`);
    console.log(`Get password : ${password} - 2`);
    // 对post返回的Observable添加订阅，触发请求
    this.http.post<any>(`http://localhost:4000`, {"userid": username, "UserPassword": password})
        .pipe(
          tap( res => console.log('HTTP response here:', res)),
          // 原map使用不符合规范，map需要返回转换后的值，仅执行副作用用tap即可
          tap(data => this.signinuser.next(data)),
          tap(console.log)
        )
        .subscribe({
          error: (err) => console.error('登录请求出错：', err) // 必须添加错误处理，避免未捕获异常
        })
    this.signinuser.subscribe( getnewdata => { console.log(getnewdata) });
  }
}

额外优化建议 #

• 原代码中map操作符使用不当：map用于转换 Observable 发射的数值，需要返回新值，仅执行更新BehaviorSubject这类副作用操作应该用tap。
• 目前signin方法中每次调用都会新增一个signinuser的订阅，会造成内存泄漏，建议将该订阅逻辑迁移到调用signin的组件中，或者在服务内仅初始化一次订阅。
• 建议为POST请求添加明确的接口路径，不要直接请求根地址，方便后续接口维护。

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