如何在beforeunload事件中待异步函数执行完成后再显示离开站点提示

• 浏览器的beforeunload、unload事件设计上不会等待异步任务执行完成，回调中的Promise、异步ajax、定时器都会在页面开始卸载时被直接终止，你写的await逻辑不会生效。
• 现代浏览器已经全面禁止在页面卸载相关事件中执行同步XHR请求，避免阻塞页面卸载流程影响用户体验。

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

这个API是W3C专门为卸载前数据上报场景设计，浏览器会保证尽可能将请求发出，且不阻塞页面卸载流程，是当前最可靠的方案。

改造代码示例： #

$(document).ready(function () {
    $(window).on("beforeunload", function (event) {
        // 只有存在未保存修改时才弹出离开提示
        if (/* 你的业务判断条件，比如用户修改了内容未提交 */) {
            // 触发浏览器默认的离开确认弹窗
            event.preventDefault();
            event.returnValue = "您所做的更改可能不会被保存，确定要离开吗？";
            // 注册单次unload事件，用户确认离开后触发请求
            $(window).one('unload', function () {
                // 构造请求数据，按需使用FormData或者Blob格式
                const postData = new FormData();
                // 如需传JSON格式数据，用下面的写法
                // const postData = new Blob([JSON.stringify({foo: 'bar'})], {type: 'application/json'});
                // 发送请求，浏览器会尽力保证请求送达
                navigator.sendBeacon('@(Url.Action("CheckAjax"))', postData);
            });
        }
    })
})

注意事项： #

• 仅支持POST请求，单请求数据大小上限一般为64KB，满足绝大多数业务场景需求。
• 没有请求成功/失败的回调，适合不需要处理返回结果、仅需尽力上报数据的场景。

2. 自定义跳转拦截逻辑（适合需要确认请求完成才能离开的场景） #

如果你的业务要求必须等待请求执行完成才能跳转，不要依赖原生的beforeunload提示，改为手动拦截所有离开当前页面的操作：

• 拦截页面内所有外链点击、表单提交、返回/前进操作，先弹自定义的确认弹窗。
• 用户确认离开后，先执行你的ajax逻辑，等待执行完成后再主动跳转页面/关闭窗口。
• 缺点：无法覆盖用户直接关闭浏览器进程、强制刷新、地址栏手动输入地址跳转的场景。

3. 兜底优化 #

不要将卸载时请求作为核心业务逻辑的依赖，建议优先做实时自动保存：用户每修改一点内容就异步上报到后端，从根源上避免卸载时才需要提交大量数据的情况。

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