Angular项目新增Web API调用未触发，原有接口正常如何排查解决

核心原因（90%以上概率） #

Angular的HttpClient返回的所有Observable都是冷Observable，只有被订阅时才会实际发起HTTP请求，你原有代码能正常运行的stops$是因为在组件模板中使用了| async管道，管道会自动完成订阅逻辑触发请求，而新增的list$没有被订阅所以不会发请求。

排查步骤 #

• 首先检查新增的Observable是否完成订阅：

  1. 如果要在模板中使用list$的数据，在模板对应位置加上async管道即可，示例：

  <div *ngFor="let item of list$ | async">
    {{item.name}}
  </div>
  

  2. 如果不需要在模板展示，只需要处理接口返回结果，在组件中手动订阅即可，示例：

  this.apiService.getList(id, '3').subscribe({
    next: (res) => {
      // 处理返回结果
      console.log('接口返回数据：', res)
    },
    error: (err) => {
      // 处理报错逻辑
      console.error('接口调用失败：', err)
    }
  })
  

• 如果完成订阅后仍然无法发起请求，继续排查以下点：

  1. 检查项目全局Http拦截器逻辑，是否存在接口路径校验、权限校验规则，新增的接口路径被拦截器直接中止了请求（比如拦截器匹配不到规则直接返回EMPTY，不会发起请求）
  2. 打开浏览器控制台查看是否有报错，比如CORS跨域错误、参数类型错误，前端抛出的未捕获异常会阻断后续请求逻辑
  3. 如果你组件配置了ChangeDetectionStrategy.OnPush变更检测策略，检查新增的list$赋值后是否触发了变更检测，导致async管道未正常执行订阅逻辑

快速验证方法 #

你可以直接在Service的getList方法中临时增加一行手动订阅的代码，测试请求是否能正常发出：

getList(id: string, chosen: string): Observable<StopListModel[]> {
  let myUrl: string = API_URL + '/stop/list';
  myUrl += '/' + id;
  myUrl += '/' + chosen;
  // 临时测试代码，请求能正常发出则证明是上层调用未订阅的问题
  this.http.get<StopListModel[]>(myUrl, this.httpUtils.getHTTPHeader()).subscribe(res => console.log('测试请求返回：', res))
  return this.http.get<StopListModel[]>(myUrl, this.httpUtils.getHTTPHeader());
}

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