Angular 4中POST请求错误处理及窗口关闭时请求结果校验方法

当浏览器窗口关闭时，普通的AJAX请求（比如你用Angular HttpClient发起的请求）很容易因为页面卸载被中断，导致你无法收到回调通知。下面是几种可靠的解决方案，按推荐程度排序：

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

这是浏览器专门为页面卸载时发送数据设计的API，它的优势在于：

• 异步发送，不会阻塞页面卸载，不影响用户体验
• 浏览器会尽可能保证请求发送完成，即使页面已经开始卸载
• 无需担心回调被中断的问题

不过sendBeacon默认不直接支持发送JSON格式，需要把数据转成Blob。针对你的代码，修改如下：

createCallRecord(data: any) {
  const logData = {"chathist": data , "uid": "1111" };
  const blob = new Blob([JSON.stringify(logData)], { type: 'application/json' });
  
  // sendBeacon会返回一个boolean，表示浏览器是否成功将请求加入队列
  const isQueued = navigator.sendBeacon(MY_URL, blob);
  
  // 注意：sendBeacon没有回调函数，无法直接获取响应
  // 但如果需要确认请求是否到达服务器，只能通过服务器端日志排查
  if (!isQueued) {
    // 浏览器无法将请求加入队列，此时可以降级处理（比如用同步请求）
    this.fallbackSyncRequest(logData);
  }
}

// 降级用的同步请求（不推荐，会阻塞页面卸载）
private fallbackSyncRequest(logData: any) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', MY_URL, false); // 同步请求
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify(logData));
  
  // 同步请求可以拿到响应，但会阻塞页面关闭
  if (xhr.status === 200) {
    console.log('请求成功（降级方案）');
  } else {
    console.error('请求失败（降级方案）');
  }
}

需要注意的是，sendBeacon无法获取服务器的响应数据，因为它是为了保证请求被发送而设计的，不关注响应。如果必须确认请求是否成功，只能通过服务器端的日志来验证，或者在页面卸载前提前发送请求（比如用户点击关闭按钮时，而不是等待unload事件）。

2. 使用同步XMLHttpRequest（不推荐） #

如果你坚持要获取请求的响应状态，可以使用同步请求，但这会阻塞页面卸载，影响用户体验：

createCallRecord(data: any) {
  const logData = {"chathist": data , "uid": "1111" };
  const xhr = new XMLHttpRequest();
  xhr.open('POST', MY_URL, false); // 关键：同步请求
  xhr.setRequestHeader('Content-Type', 'application/json');
  
  try {
    xhr.send(JSON.stringify(logData));
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('请求成功:', xhr.response);
    } else {
      console.error('请求失败:', xhr.statusText);
    }
  } catch (error) {
    console.error('请求异常:', error);
  }
}

3. 提前触发请求（最佳实践） #

如果业务允许，尽量不要等到unload事件才发送请求。比如：

• 当用户点击关闭按钮/离开页面的链接时，先发送请求，等待响应后再允许页面跳转
• 定期保存数据（比如每隔几分钟自动保存聊天记录），减少卸载时需要发送的数据量

这种方式可以完全避免卸载时的请求问题，还能让你正常处理成功/错误回调。

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