React中捕获窗口关闭/刷新事件失效问题求助

现有方法失效的原因 #

• 第一个useEffect清理函数：
  这个函数仅在React组件被卸载（比如路由切换、组件销毁）时触发，不会在页面关闭/刷新时执行，完全不符合需求。

• 第二个onbeforeunload写法：
  现代浏览器出于安全和用户体验考虑，会拦截alert()这类自定义弹窗，你在onbeforeunload里调用alert不会显示。另外，该事件的正确用法是返回非空字符串（部分浏览器只需返回任意值），触发浏览器自带的确认弹窗，而非自定义alert。

• 第三个addEventListener错误：
  事件名写错了！应该用beforeunload，而非onbeforeunload——addEventListener的事件名不需要加on前缀，这直接导致事件监听无效。

正确实现方案 #

要在页面关闭/刷新时稳定发送API请求，推荐使用navigator.sendBeacon()，这是浏览器专门为页面卸载场景设计的API，能保证请求被异步发送且不会被页面终止打断。结合React的useEffect实现如下：

useEffect(() => {
  const handleBeforeUnload = (e) => {
    // 可选：触发浏览器默认的关闭确认弹窗，根据需求决定是否保留
    e.preventDefault();
    e.returnValue = ''; // 非空字符串即可，适配不同浏览器
    
    // 发送API请求，sendBeacon支持FormData、Blob或字符串格式
    const data = new FormData();
    data.append('key', 'value'); // 替换成你的业务数据
    navigator.sendBeacon('/your-target-api', data);
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, []); // 空依赖数组，确保只绑定一次监听

补充说明 #

1. 如果需要自定义请求头或使用POST以外的HTTP方法，可以结合fetch的keepalive选项：

   fetch('/your-target-api', {
     method: 'POST',
     body: JSON.stringify({ key: 'value' }),
     headers: { 'Content-Type': 'application/json' },
     keepalive: true // 关键参数，保证请求在页面卸载时完成
   });
   

2. 禁止在beforeunload或unload事件中使用同步AJAX请求，现代浏览器会直接取消这类请求，导致数据发送失败。
3. 对于用户直接关闭电脑的极端场景，即使是sendBeacon也无法保证100%成功（浏览器可能没有机会发送请求），这种情况只能通过后端心跳检测或前端定期同步来弥补。

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