Angular监听浏览器关闭/刷新事件及考试结果提交问题咨询

我完全懂你现在的困扰——考试网站已经搞定了超时自动提交，但用户关闭浏览器或刷新页面时毫无反应，参考了之前的方案后刷新还是没提交成功。这大概率是因为普通异步请求在页面卸载时被浏览器中断了，咱们一步步来解决：

核心思路：用navigator.sendBeacon替代普通HTTP请求 #

浏览器的beforeunload事件生命周期极短，普通的HttpClient.post这类异步请求还没完成，页面就已经卸载了，直接导致提交失败。而navigator.sendBeacon是浏览器专门为页面卸载场景设计的API，它会在后台异步发送请求，并且浏览器会保证请求完成，不会阻塞页面卸载流程，完美适配你的需求。

具体实现步骤 #

1. 在考试组件中监听beforeunload事件 #

用Angular的@HostListener装饰器监听全局的beforeunload事件，精准捕获浏览器关闭、刷新的动作：

import { Component, HostListener } from '@angular/core';
import { ExamService } from './exam.service'; // 假设你有处理考试逻辑的服务

@Component({
  selector: 'app-exam',
  templateUrl: './exam.component.html',
  styleUrls: ['./exam.component.css']
})
export class ExamComponent {
  constructor(private examService: ExamService) {}

  // 监听浏览器卸载前的事件
  @HostListener('window:beforeunload', ['$event'])
  handleBeforeUnload(event: Event) {
    // 可选：阻止默认的关闭提示（部分浏览器可能不生效）
    event.preventDefault();
    // 获取当前用户的答题数据
    const userAnswers = this.examService.getCurrentUserAnswers();
    
    if (userAnswers) {
      // 调用页面卸载时的提交方法
      this.examService.submitAnswersOnUnload(userAnswers);
    }
    
    // 部分浏览器需要返回非空字符串来触发关闭提示（可根据需求决定是否保留）
    return '';
  }
}

2. 在服务中封装sendBeacon提交逻辑 #

把提交逻辑放到服务里，方便复用和维护：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ExamService {
  private submitApiUrl = '/api/exam/submit-results'; // 你的服务器提交接口

  // 模拟获取当前用户答题数据的方法（根据你的实际业务逻辑实现）
  getCurrentUserAnswers() {
    return JSON.parse(localStorage.getItem('currentExamAnswers') || '{}');
  }

  // 页面卸载时的提交方法
  submitAnswersOnUnload(answerData: any) {
    // 将JSON数据转为Blob格式，sendBeacon支持Blob/FormData/字符串类型
    const dataBlob = new Blob([JSON.stringify(answerData)], { type: 'application/json' });
    // 发送提交请求
    navigator.sendBeacon(this.submitApiUrl, dataBlob);
  }
}

3. 关键注意事项 #

• 绝对不要用普通HttpClient请求：普通异步请求在beforeunload事件中会被浏览器强制中断，服务器根本收不到数据，sendBeacon是这个场景下的最优解。
• 测试时验证请求是否发送：打开浏览器开发者工具的Network面板，勾选「Preserve log」选项，再刷新页面，就能看到sendBeacon发送的请求是否成功到达服务器。
• 区分正常跳转和关闭/刷新：如果网站内有跳转链接（比如返回首页），不需要触发提交，可以在跳转前设置一个标记，在handleBeforeUnload中判断后跳过提交逻辑。

为什么之前的方案可能失效？ #

如果之前用的是普通的HttpClient.post，哪怕在beforeunload中调用，浏览器也会因为页面即将卸载而直接取消这个异步请求，导致服务器收不到数据。而sendBeacon是浏览器专门优化的API，会把请求加入后台任务队列，确保请求完成后再彻底卸载页面。

内容的提问来源于stack exchange，提问作者Eve-Sama