Angular 5中HttpClient无重试却120秒后重复触发请求问题求助

首先可以明确：这不是Angular 5的默认行为，也不是框架Bug。Angular的HttpClient本身不会在请求耗时较长时自动触发重试，你的代码里也没有添加retry()这类重试操作符，而且设置了5分钟的超时（timeoutWith(300000)），远大于120秒的触发时间，所以框架层面不会导致这种问题。

下面是几种可能的原因及对应的排查方向：

1. 浏览器底层的TCP重试机制 #

部分浏览器在检测到TCP连接超时（比如服务器长时间未响应，导致TCP连接中断）时，会在传输层自动发起重试请求。这种重试是浏览器底层处理的，不会显示在Chrome的网络面板中，但Angular的HTTP拦截器因为是在应用层捕获所有即将发送的请求，所以能检测到。

排查方式： #

• 检查Chrome的net-internals页面（在地址栏输入chrome://net-internals/#events），搜索你的请求URL，查看是否有TCP层面的重试记录。
• 测试其他浏览器（比如Firefox），看是否会出现同样的情况。如果只有Chrome出现，大概率是浏览器TCP重试导致的。

2. 反向代理/服务器的重试配置 #

如果你的应用部署在反向代理服务器（如Nginx、Apache、Cloudflare）或后端服务器之后，这些服务可能配置了超时重试策略。例如：

• Nginx的proxy_next_upstream配置可能会在后端超时后自动重试；
• 部分云服务的负载均衡器也会默认开启超时重试。

这种情况下，代理服务器会在后端响应超时后，自动向你的应用发起第二次请求（或者代理自己向后端重试，但如果是后者，应用层不会感知到），导致拦截器捕获到重复请求，但浏览器网络面板只会显示和代理的一次连接。

排查方式： #

• 查看代理服务器的配置文件，检查是否有超时重试相关的设置；
• 直接向后端服务发起请求（绕过代理），看是否还会出现第二次请求。

3. 代码中隐藏的重复订阅或触发逻辑 #

虽然你确认代码中没有重复调用服务，但有可能存在以下隐蔽情况：

• 组件模板中使用了async管道，同时在组件类中又手动订阅了同一个Observable，导致请求被触发两次；
• 某些第三方库或自定义指令无意中触发了重复的请求；
• 路由守卫、生命周期钩子（如ngOnInit）被重复执行，导致请求被多次调用。

排查方式： #

• 在appPost方法中添加日志，记录每次调用的时间和调用栈，查看第二次请求的来源：

  public appPost(inputObj: InputObj) {
    console.log('appPost called at:', new Date(), 'call stack:', new Error().stack);
    return this.httpClient
      .post('_url_', inputObj)
      .timeoutWith(300000, Observable.throw({"error" : "The Application has timed out. Please Contact Administrator."}));
  }
  

• 检查组件模板中是否有async管道和手动订阅同时存在的情况。

4. RxJS Observable的特性导致的重复触发 #

如果你的appPost方法返回的Observable被多个订阅者订阅，而没有进行共享（比如使用share()操作符），那么每次订阅都会发起一次新的请求。不过你说代码中只有一次subscribe，但如果存在其他隐性订阅（比如第三方库订阅了同一个Observable），也会导致重复请求。

解决方案： #

可以尝试在appPost方法中添加share()操作符，确保多个订阅者共享同一个请求：

public appPost(inputObj: InputObj) {
  return this.httpClient
    .post('_url_', inputObj)
    .timeoutWith(300000, Observable.throw({"error" : "The Application has timed out. Please Contact Administrator."}))
    .share();
}

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