Angular 11中为何Promise触发的HTTP服务请求会被调用两次

结合你给出的Angular代码场景，关闭后端服务测试时发现接口被调用两次，基本都是以下几类情况导致的：

• 开发环境的组件双初始化机制
  本地用ng serve启动开发服务时，Angular为了识别开发阶段的副作用（比如意外的状态变更、非预期的逻辑执行），会将组件的初始化流程完整执行两遍。你现在把这段立即执行的异步请求直接写在组件类顶层，没有加任何防重拦截，组件初始化时自然会发起两次请求。这是开发环境最高发的重复请求场景，切到生产构建后该问题会自动消失。
• 无幂等控制的逻辑放在了高频触发的钩子里
  如果这段请求代码不是写在组件初始化阶段，而是放在ngDoCheck这类每次变更检测都会触发的钩子里，请求失败后会更新组件状态、触发新一轮变更检测，很容易形成循环触发，导致同个接口被重复调用。
• 请求重试机制触发
  关闭后端服务后，浏览器本身对无响应的GET请求存在内置重试逻辑；如果项目里配置了全局HTTP拦截器，默认给请求加了重试策略，也会出现同个接口被调用两次的情况。

• 切生产模式测试：执行ng build --prod后托管静态资源验证，如果重复请求消失，就能确认是开发环境双初始化的机制导致的。
• 给请求加执行锁：在组件内定义标记位，比如isFetchingCountries，请求发出前将标记设为true，请求无论成功还是失败返回时将标记重置为false，只有标记为false时才允许发起请求，从逻辑上避免重复调用。
• 全局排查拦截器逻辑：检索项目中所有实现HttpInterceptor的代码，确认是否存在默认给GET请求加重试的逻辑。

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