当用户请求离开时如何将数据保存到数据库？

Question

正确的做法是什么？我的目标是在数据库中保存用户观看视频的分钟数，直到他关闭页面，并将视频的分钟数设置为他下次打开同一视频时停止的位置。我尝试使用

beforeunload

事件来做到这一点，但页面在函数返回之前关闭。我正在使用 async/await 但我不知道如何确保事件完成并正常运行。我在我的反应组件中尝试过类似的方法：

const ec = async (e) => await handleBeforeUnload(e);
    window.addEventListener('beforeunload', ec);

    return () => {
        window.removeEventListener('beforeunload', ec);
    }

但不保证该函数在离开页面之前完成。正确的方法是什么？

编辑：这是其余的代码：

    const handleBeforeUnload = async (event) => {
        await save_timestamp();
    }

    const save_timestamp = async () => {

    const v:IResumeVideo = {
        seconds: timeline.current,
        video_id: video_id
    }

    const response = await fetch('/api/save_video', {
        method: 'POST',
        body: JSON.stringify(v)
      });
    const result = await response.json();           
}

Answer 1

对于保存用户状态的用例，似乎根本不建议使用 beforeunload ，请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event：

beforeunload 事件存在一些问题：它不能可靠地触发，尤其是在移动平台上。例如，在以下情况下根本不会触发 beforeunload 事件： 移动用户访问您的页面。 然后用户切换到另一个应用程序。 随后，用户从应用程序管理器关闭浏览器。

注意：建议使用visibilitychange事件作为自动保存应用程序状态的更可靠信号，以解决上述问题。请参阅不要丢失用户和应用程序状态，使用页面可见性了解更多详细信息。