Angular页面重载/刷新时如何仅在用户确认后执行数据删除服务调用

问题根因 #

当前代码的错误在于，删除逻辑直接写在了beforeunload事件回调中。该事件会在浏览器准备卸载页面、弹出确认弹窗时就触发，无论用户最终点击「确认」还是「取消」，删除逻辑都会提前执行，因此会出现点击取消仍删数据的问题。

实现逻辑 #

浏览器页面卸载的事件流是固定的：

1. 用户触发刷新/关闭页面操作，首先触发beforeunload事件
2. 如果beforeunload回调返回非空值，浏览器弹出确认卸载弹窗
3. 用户点击「取消」：终止卸载流程，后续事件不会触发
4. 用户点击「确认」：继续卸载流程，触发unload事件，页面随后销毁
   因此只需将删除逻辑放到unload事件回调中，就能保证只有用户确认重载时才会执行删除。

注意事项 #

页面卸载阶段，普通的异步请求（如Angular HttpClient返回的Promise/Observable）会被浏览器直接中断，几乎无法成功送达后端。需要使用专门适配卸载阶段的请求API：

• navigator.sendBeacon()：浏览器原生保证请求大概率发送完成，默认发POST请求，兼容性最好
• 带keepalive: true的fetch：支持自定义请求方法，单请求大小限制为64KB

修改后代码示例 #

export class ExampleComponent implements ComponentCanDeactivate {
    // 标记是否需要执行数据清理
    private needCleanup = false;

    @HostListener("window:beforeunload", ["$event"])
    canDeactivate(e: BeforeUnloadEvent): Observable<boolean> | boolean {
        this.needCleanup = !!(this.user || this.workingStatus || this.engagement);
        if (this.needCleanup) {
            // 仅触发浏览器默认确认弹窗，不执行删除
            e.preventDefault();
            e.returnValue = '';
            return false;
        }
        return true;
    }

    @HostListener("window:unload")
    handlePageUnload(): void {
        // 只有用户确认卸载才会触发该事件，执行删除
        if (this.needCleanup) {
            this.delete();
        }
    }

    private delete(): void {
        // 删除workingStatus，示例用sendBeacon
        const statusData = new FormData();
        // 按需填充接口需要的参数
        navigator.sendBeacon('/api/working-status/delete', statusData);

        // 删除engagement
        const engagementData = new FormData();
        navigator.sendBeacon('/api/engagement/delete', engagementData);

        // 删除user
        const userData = new FormData();
        navigator.sendBeacon('/api/user/delete', userData);

        // 如果后端接口要求DELETE方法，用带keepalive的fetch即可
        // fetch('/api/user/delete', {
        //   method: 'DELETE',
        //   keepalive: true,
        //   headers: {
        //     'Content-Type': 'application/json'
        //   },
        //   body: JSON.stringify({ userId: this.user.id })
        // })
    }
}

补充说明 #

如果还要覆盖Angular内部路由跳转的场景，可以在路由守卫canDeactivate的回调中获取用户的确认结果，确认后再执行删除逻辑，和页面刷新的场景分开处理即可。

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