Angular 15中拦截器无法处理Post请求的问题排查

问题描述 #

在Angular 15项目中实现了包含Get和Post请求的服务类，以及HTTP拦截器。Get请求可正常被拦截器处理，但putEditBoard方法的Post请求仅执行了方法体（控制台输出Post日志），却未实际发送请求，拦截器也未捕获到该请求。

问题根源 #

Angular的HttpClient返回的是冷Observable，这类Observable只有在被订阅（subscribe）时才会触发实际的HTTP请求。原putEditBoard方法仅创建了Post请求的Observable，但既没有返回它，也没有在调用处进行订阅，导致请求从未被触发，因此拦截器也无法捕获到该请求。

对比其他正常工作的请求方法（如getProbesBoard、putAddBoard），它们都返回了Observable，且在调用处完成了订阅，所以能正常发送请求并被拦截器处理。

解决方案 #

1. 修改服务类中的putEditBoard方法 #

修改UserService中的putEditBoard方法，返回HTTP请求生成的Observable对象：

putEditBoard(probe:any, id:number){
  console.log('Post')
  // 新增return语句，返回Observable
  return this.http.post(this.editUrl+id,probe)
}

2. 在调用处订阅Observable #

在组件或其他调用putEditBoard的地方，对返回的Observable进行订阅，触发实际请求：

// 示例：在组件中调用并订阅
this.userService.putEditBoard(yourProbeData, yourId).subscribe({
  next: (response) => {
    // 处理请求成功后的逻辑
    console.log('请求成功', response);
  },
  error: (error) => {
    // 处理请求失败后的逻辑
    console.error('请求失败', error);
  }
});

完成上述修改后，Post请求会正常发送，同时被拦截器捕获处理。

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