Angular 5项目中http.get请求未执行，请求排查问题原因

你遇到的这个问题其实是RxJS中冷Observable的典型特性导致的——Angular的HttpClient.get()返回的是一个冷Observable，这种Observable不会自动发起请求，必须通过调用.subscribe()方法来激活它，否则它只会停留在“准备执行”的状态，不会真正发送网络请求。

具体问题分析 #

你的代码里只调用了.pipe()来处理数据流，但没有添加订阅操作：

this.http.get(...)
  .pipe(...)
  // 缺少.subscribe()，所以请求从未触发

这就是为什么控制台能打印loadSettings() from:，但网络面板里看不到请求、也没有报错的原因——因为请求根本没被发送出去。而curl是直接发起HTTP请求，不受RxJS的Observable机制影响，所以能正常访问服务器。

修复方案 #

你需要给Observable添加订阅操作，有两种常见的方式：

方式1：直接调用.subscribe()

修改你的loadSettings()方法，在.pipe()之后添加.subscribe()：

loadSettings() { 
  console.log("loadSettings() from:" + this.pizzaSettingsUrl); 
  this.http.get<string[]>(this.pizzaSettingsUrl, {headers: this.headers}) 
    .pipe( 
      tap(settings => this.processSettingsDictionary(settings)), 
      catchError(this.handleError("pizzaSettings", {})) 
    )
    // 添加订阅，触发请求
    .subscribe({
      next: () => console.log('设置加载完成'),
      error: (error) => console.error('加载设置失败:', error)
    }); 
}

这样Observable就会被激活，HTTP请求会立即发送，tap里的processSettingsDictionary也会正常执行。

方式2：使用async管道（更推荐）

如果你希望Angular自动处理订阅和取消订阅（避免内存泄漏），可以把Observable赋值给组件的一个属性，然后在模板中使用async管道：

// 组件类中定义一个Observable属性
settings$: Observable<any>;

loadSettings() { 
  console.log("loadSettings() from:" + this.pizzaSettingsUrl); 
  this.settings$ = this.http.get<string[]>(this.pizzaSettingsUrl, {headers: this.headers}) 
    .pipe( 
      tap(settings => this.processSettingsDictionary(settings)), 
      catchError(this.handleError("pizzaSettings", {})) 
    ); 
}

然后在模板中添加：

<!-- 用async管道触发订阅，Angular会自动管理订阅生命周期 -->
<div *ngIf="settings$ | async"></div>

这种方式的好处是当组件销毁时，Angular会自动取消订阅，不需要手动清理，能有效避免内存泄漏。

额外提示 #

如果你的handleError方法是自定义的，要确保它返回一个Observable（比如return throwError(error)或者return of({})），否则catchError会中断数据流，导致订阅无法正常执行。

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