React中浏览器关闭时调用API的方法及onbeforeunload失效问题解决

你遇到的问题核心是：浏览器在beforeunload阶段会严格限制异步操作，普通的fetch或axios异步请求还没完成就会被浏览器终止，导致API调用失败。下面是可行的解决方法：

1. 使用navigator.sendBeacon()（推荐） #

这个API是浏览器专门为页面卸载/关闭场景设计的，它会异步发送请求但不会阻塞页面卸载，浏览器会尽力保证请求被送达后端。

示例代码：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleUnload = () => {
      // 构造请求数据（支持FormData、Blob或字符串）
      const payload = new FormData();
      payload.append('userId', 'your-user-id');
      payload.append('event', 'browser_closed');

      // 发送请求
      navigator.sendBeacon('/api/your-endpoint', payload);
    };

    window.addEventListener('beforeunload', handleUnload);
    // 组件卸载时移除监听
    return () => window.removeEventListener('beforeunload', handleUnload);
  }, []);

  return <div>Your App Content</div>;
}

注意事项：

• 仅支持POST请求
• 无法自定义请求头（Content-Type由发送的数据类型自动决定）
• 数据大小限制通常为64KB，超出会失败

2. 使用fetch的keepalive选项 #

如果需要自定义请求头或使用其他HTTP方法，可以用fetch结合keepalive配置，它能让请求在页面卸载后继续执行。

示例代码：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleUnload = async () => {
      try {
        await fetch('/api/your-endpoint', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            userId: 'your-user-id',
            event: 'browser_closed'
          }),
          keepalive: true // 关键配置
        });
      } catch (err) {
        console.error('API调用失败:', err);
      }
    };

    window.addEventListener('beforeunload', handleUnload);
    return () => window.removeEventListener('beforeunload', handleUnload);
  }, []);

  return <div>Your App Content</div>;
}

注意事项：

• keepalive同样有数据大小限制（约64KB）
• 现代浏览器均支持，但部分旧浏览器可能不兼容

额外提醒 #

• 不要在beforeunload事件中处理复杂逻辑，尽量让请求轻量化
• 页面刷新也会触发beforeunload，如果需要区分关闭和刷新，可尝试监听pagehide事件并判断event.persisted属性，但该方法并非100%可靠
• 后端需确保能正确接收请求，若依赖会话Cookie，需保证Cookie的HttpOnly和跨域配置符合要求

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