ReactJS中getCurrentPosition回调未触发问题求助

问题特征 #

已确认navigator.geolocation存在（可正常进入判断分支），但传入的成功、错误回调始终无响应，开发栈为React、测试浏览器为最新版Chrome，按优先级依次排查以下场景：

1. 排查安全上下文限制 #

最新版Chrome对地理定位API的触发做了严格的上下文校验，即使navigator.geolocation对象存在（能正常进入if分支），不符合要求的场景下浏览器也会直接静默挂起定位请求，不触发任何回调：

• 仅https://协议的线上站点、http://localhost（本地开发调试地址）可正常触发定位流程
• 本地开发时使用内网IP（如http://192.168.1.100:3000）、测试环境用非https的http协议部署时，定位请求会被Chrome直接拦截，无任何回调触发
• 检查当前页面标签是否处于非激活状态：Chrome会冻结后台标签页的JS执行上下文，挂起所有未完成的定位请求，切回当前激活标签页后通常会触发积压的回调逻辑

2. 检查站点权限的静默挂起状态 #

如果之前在站点权限弹窗中选择过「阻止位置权限」，最新版Chrome不会立刻触发错误回调，而是会一直挂起请求等待权限状态变更，表现就是两个回调都不执行：

• 点击Chrome地址栏左侧的站点设置图标，找到「位置」权限项
• 将权限状态从「始终阻止」调整为「询问每次访问」，刷新页面后重新触发定位请求，即可看到正常的权限弹窗与后续回调逻辑

3. 手动配置请求超时，替代默认的无限等待 #

getCurrentPosition方法的默认超时配置为Infinity（无限等待），如果设备定位模块长时间未返回结果（比如室内环境GPS信号差、系统定位功能异常），请求会一直处于挂起状态，既不触发成功回调，也不触发错误回调：

• 给getCurrentPosition传入第三个配置参数，设置明确的超时时间，超时后浏览器会主动触发错误回调：

navigator.geolocation.getCurrentPosition(
  showPosition,
  showError,
  {
    enableHighAccuracy: false,
    timeout: 10000, // 10秒超时，到时间自动触发错误回调
    maximumAge: 0
  }
)

4. 修复React开发模式下的请求阻塞问题 #

React开启严格模式（StrictMode）时会在开发环境下双次执行组件挂载逻辑，未做清理的定位请求会在组件首次卸载时被挂起，导致后续的请求流程被阻塞：

• 使用AbortController实现定位请求的生命周期绑定，在组件卸载时主动取消未完成的请求，避免请求挂起：

// 在React组件的useEffect中实现
useEffect(() => {
  const abortController = new AbortController();
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      showPosition,
      showError,
      {
        signal: abortController.signal,
        timeout: 10000
      }
    )
  }
  // 组件卸载时清理未完成的定位请求
  return () => abortController.abort();
}, [])

额外排查项：在调用getCurrentPosition前加日志打印showPosition、showError的函数引用，确认两个回调没有被意外重写为空函数或其他无响应的逻辑

内容的提问来源于stack exchange，提问作者Saddaf Afrin Khan