React+Axios实现页面/浏览器关闭时发送数据的方案咨询

之前用unload/beforeunload不稳定是因为现代浏览器对这些事件做了优化（比如页面预加载、快速关闭时跳过），而且beforeunload必然会触发关闭确认弹窗，不符合你的需求。推荐用以下组合：

核心原理 #

• visibilitychange事件：监听页面可见性状态变化，当用户切换标签页、最小化窗口、关闭浏览器时，页面会变为hidden状态，这个事件触发稳定，且不会弹出任何弹窗。
• navigator.sendBeacon API：浏览器专门为页面卸载时发送数据设计的API，它是异步后台请求，不会阻塞页面关闭流程，浏览器会尽力保证请求完成（只要数据大小在限制内），比Axios普通请求可靠得多。

React 实现示例 #

import { useEffect } from 'react';

const PageLeaveTracker = () => {
  useEffect(() => {
    const handlePageHidden = () => {
      if (document.visibilityState === 'hidden') {
        // 构造要发送的数据
        const payload = {
          userId: 'your-user-id',
          action: 'page-leave',
          timestamp: Date.now()
        };

        // 转成FormData（sendBeacon默认支持FormData/Blob/字符串格式）
        const formData = new FormData();
        Object.entries(payload).forEach(([key, val]) => formData.append(key, val));

        // 发送请求，无需await，浏览器会在后台处理
        navigator.sendBeacon('/api/user-behavior', formData);
      }
    };

    document.addEventListener('visibilitychange', handlePageHidden);

    // 组件卸载时移除监听
    return () => {
      document.removeEventListener('visibilitychange', handlePageHidden);
    };
  }, []);

  return null; // 无UI逻辑组件，可直接嵌入根组件使用
};

export default PageLeaveTracker;

特殊场景处理（必须用Axios/自定义请求） #

如果你的业务依赖Axios的拦截器、自定义headers等，可以用fetch的keepalive选项替代，效果类似：

const handlePageHidden = () => {
  if (document.visibilityState === 'hidden') {
    const payload = { /* 你的业务数据 */ };
    fetch('/api/your-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + localStorage.getItem('auth-token')
      },
      body: JSON.stringify(payload),
      keepalive: true // 关键：开启keepalive保证请求在后台完成
    });
  }
};

注意：keepalive有数据大小限制（通常64KB），如果数据较大，优先用sendBeacon。

测试注意事项 #

• 本地开发时，打开DevTools可能会导致visibilitychange行为异常，建议用无痕模式或生产环境测试。
• 不要依赖sendBeacon的返回值做业务逻辑，它只返回是否成功将请求加入队列，无法保证后端一定接收（比如网络中断）。

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