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  // 保證頁面關閉后仍發送});
});