咨询：Angular4中单次API调用为何触发两次POST请求

这种情况我之前在Angular项目里也碰到过，结合你描述的「一次无请求体无响应、一次有请求体有响应」的现象，大概率是下面这些原因导致的，你可以逐一排查：

• 重复订阅Observable
  Angular的HttpClient返回的是冷Observable，每调用一次subscribe()就会触发一次新请求。要是你不小心在代码里订阅了两次（比如组件里手动subscribe()一次，模板里又用了async管道——async会自动订阅），或者服务和组件各订阅了一次，就会发起两次POST请求。其中第一次可能因为请求体还没准备好，就出现了无请求体的情况。
  解决办法：检查代码里的订阅逻辑，确保同一个Observable只被订阅一次。如果需要多组件共享请求结果，可以用shareReplay()操作符把冷Observable转成热Observable，避免重复触发请求。

• API调用方法被误触发两次
  比如在组件的ngOnInit()里不小心写了两次调用API的代码，或者模板里的某个事件（比如(click)）绑定了多次相同的方法，导致请求被触发两次。第一次请求可能因为请求体未初始化完成，所以没有携带请求体也得不到响应。
  解决办法：检查组件的生命周期钩子、事件绑定逻辑，确保API调用方法只被执行一次。

• 自定义HTTP拦截器逻辑问题
  如果你写了自定义的HTTP拦截器，可能在处理请求时不小心重新发起了请求，或者拦截器的逻辑导致请求被重复发送。比如拦截器里错误地多次调用了next.handle(request)，或者没有正确处理请求流。
  解决办法：检查拦截器代码，确保请求只被传递一次，没有重复触发的逻辑。

• 浏览器扩展干扰
  少数情况下，浏览器的某些扩展（比如广告拦截、调试类扩展）可能会干扰请求，导致重复发送。你可以试试在Chrome无痕模式下打开页面，看看是否还会出现两次请求。

另外，你可以仔细对比Chrome DevTools里两次请求的请求头和调用栈，看看有没有差异——调用栈能帮你找到请求是从代码的哪个位置发起的，这对定位问题非常有帮助。

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