2025.07.24今天我学习了如何在浏览器关闭之前请求一个接口返回到后端。

可以用performance.navigation判断是浏览器关闭，还是浏览器刷新，因为我这边只需要浏览器关闭的时候才去触发

1. 利用performance API（刷新检测）
刷新页面时，performance.navigation.type的值为1；关闭或跳转时为0或2：javascript
window.addEventListener('beforeunload', function(e) {if (performance.navigation.type === 1) {console.log('用户正在刷新页面');} else {console.log('用户可能在关闭页面或跳转');}// 提示逻辑...
});

一、navigator.sendBeacon（只支持post请求）

window.addEventListener('beforeunload', function() {
const data = JSON.stringify({
userId: '12345',
sessionDuration: 1200,
pageViews: 5
});

navigator.sendBeacon('/api/analytics', data);
});

二、fetch（需要把keepalive设置为true，支持携带token）

window.addEventListener('beforeunload', () => {fetch(`/api/analytics`, {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': 'Bearer ' + getToken()},body: JSON.stringify({userId: '12345',sessionDuration: 1200,pageViews: 5}),keepalive: true  // 保证页面关闭后仍发送});
});