Angular中HTTP GET请求无法发送至后端问题求助

我是Angular新手，从零搭建系统时遇到问题：编写了getExistingDrp方法发送GET请求到后端端点，在ngOnInit中调用该方法，但请求根本没到后端。用Postman测试后端端点能正常触发断点，可应用里没任何反应、无报错，浏览器Network标签也没请求记录，控制台只输出_Observable对象信息。

相关代码 #

getExistingDrp方法 #

public getExistingDrp():Observable<any>{
    const url = "http://localhost:2252/api/mldetails/mldropdown?AgID=49&CID=37&intExist=0";
    const token = "test-token";
    const headers = new HttpHeaders(
      {
        'Authorization': 'Bearer ' + token
      }
    );
    return this.http.get(url ,{headers: headers})
  }

控制台输出 #

_Observable {
  source: _Observable {
    source: _Observable {
      source: [_Observable],
      operator: [Function (anonymous)]
    },
    operator: [Function (anonymous)]
  },
  operator: [Function (anonymous)]
}

app.module.ts配置 #

import { NgModule } from '@angular/core';
import {
  BrowserModule,
  provideClientHydration,
} from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { TransferMLOComponent } from './pages/transfer-mlo/transfer-mlo.component';
import { MLOcomponentsComponent } from './pages/existing-mlodetails/allMLOdetails/mlocomponents/mlocomponents.component';
import { MLOdetailsNavbarComponent } from './pages/existing-mlodetails/mlodetails-navbar/mlodetails-navbar.component';
import { MLOtarrifComponent } from './pages/existing-mlodetails/allMLOdetails/mlotarrif/mlotarrif.component';
import { MLOlocationsComponent } from './pages/existing-mlodetails/allMLOdetails/mlolocations/mlolocations.component';
import { MLOdamagesComponent } from './pages/existing-mlodetails/allMLOdetails/mlodamages/mlodamages.component';
import { MLOrepairComponent } from './pages/existing-mlodetails/allMLOdetails/mlorepair/mlorepair.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { provideHttpClient, withFetch, HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SidebarComponent,
    TransferMLOComponent,
    MLOcomponentsComponent,
    MLOdetailsNavbarComponent,
    MLOtarrifComponent,
    MLOlocationsComponent,
    MLOdamagesComponent,
    MLOrepairComponent,
  ],
  imports: [BrowserModule, AppRoutingModule, NgbModule, HttpClientModule],
  providers: [provideClientHydration(), provideHttpClient(withFetch())],
  bootstrap: [AppComponent],
})
export class AppModule {}

问题原因及解决办法 #

核心问题是Observable是惰性的，你只在ngOnInit里调用了getExistingDrp()方法，但没有订阅（subscribe）这个Observable，所以请求根本不会被触发。控制台输出的就是未被订阅的Observable对象，这是正常现象。

解决步骤： #

1. 在ngOnInit中调用方法时添加订阅：

ngOnInit(): void {
  this.getExistingDrp().subscribe({
    next: (response) => {
      console.log('请求成功', response);
      // 处理返回数据
    },
    error: (err) => {
      console.error('请求失败', err);
      // 处理错误
    }
  });
}

2. 若组件会被销毁，记得在ngOnDestroy中取消订阅，避免内存泄漏。可以用Subscription对象存储订阅实例：

import { Subscription } from 'rxjs';

private drpSubscription!: Subscription;

ngOnInit(): void {
  this.drpSubscription = this.getExistingDrp().subscribe(...);
}

ngOnDestroy(): void {
  this.drpSubscription?.unsubscribe();
}

另外检查组件构造函数中是否正确注入HttpClient：

constructor(private http: HttpClient) {}

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