React类组件：页面刷新/窗口关闭时调用REST API无效问题求助

Hey there! Let's tackle this issue you're facing—getting that REST API call to fire reliably when the user refreshes, navigates away, or closes the tab/window, without popping up that annoying confirmation prompt.

The problem with your current setup is that regular async API calls (like plain fetch or axios without special flags) often get canceled by the browser when the page is unloading, especially during a tab/window close. Browsers prioritize cleaning up resources quickly here, so your async request might not finish before the page is gone.

Here's the fix using APIs designed specifically for this scenario:

Solution 1: Use navigator.sendBeacon (Recommended) #

This API was built exactly for sending data when the page is unloading. It's asynchronous, doesn't block the page from closing, and browsers guarantee the request will be processed even after the page is gone.

Here's how to integrate it into your React component:

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleBeforeUnload = this.handleBeforeUnload.bind(this);
  }

  componentDidMount() {
    // Add the event listener when the component mounts
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    // Clean up the listener when the component unmounts to avoid memory leaks
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }

  handleBeforeUnload(event) {
    // Important: Don't return a string or set event.returnValue—this avoids the confirmation prompt
    event.preventDefault(); // Some browsers require this, but no return value means no prompt

    // Prepare your API payload
    const apiData = {
      userId: '123',
      action: 'session-ended'
    };

    // Convert JSON to a Blob since sendBeacon accepts FormData, Blob, or string
    const payloadBlob = new Blob([JSON.stringify(apiData)], { type: 'application/json' });

    // Send the request
    navigator.sendBeacon('/your-api-endpoint', payloadBlob);
  }

  render() {
    return <div>Your component content here</div>;
  }
}

Solution 2: Fetch with keepalive Flag (For Custom Headers) #

If you need to send custom headers (like an Authorization token), navigator.sendBeacon doesn't support that. Instead, use fetch with the keepalive: true option—this tells the browser to keep the request alive even as the page unloads.

handleBeforeUnload(event) {
  event.preventDefault();

  const apiData = { userId: '123', action: 'session-ended' };

  fetch('/your-api-endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer your-token-here'
    },
    body: JSON.stringify(apiData),
    keepalive: true // Critical for ensuring the request completes
  });
}

Key Notes: #

• No Confirmation Prompt: As long as you don't return a string from the beforeunload handler or set event.returnValue, the browser won't show that "Are you sure you want to leave?" message.
• Browser Support: Both sendBeacon and fetch with keepalive work in all modern browsers (Chrome, Firefox, Edge, Safari 14+). For older browsers, you'd have to fall back to synchronous XMLHttpRequest, but that's not recommended since it blocks the page from closing smoothly.
• Cleanup: Always remove the event listener in componentWillUnmount to prevent memory leaks in your React app.

This should make your API call fire reliably across all scenarios—refresh, navigation, and tab/window close—without any annoying prompts.

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