场景:当前页面正在执行异步任务,当用户点击导航栏或直接关闭页面时,需调接口取消任务,减少资源浪费。
问题:如果在beforeunload
事件中调ajax 请求,则会出现浏览器cancel掉请求的情况。
解决:使用
方法,适用于发送少量数据到服务器。sendBeacon
Navigator.sendBeacon()
这个方法主要用于满足统计和诊断代码的需要,这些代码通常尝试在卸载(unload)文档之前向 Web 服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而,对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在unload
事件处理器中产生的异步XMLHttpRequest
。
Vue 3代码如下
<script setup>
import { onBeforeUnmount, onMounted } from 'vue';
// 取消任务的API函数
function cancelTask() {
navigator.sendBeacon('/api/cancel-task', JSON.stringify({ task: 'taskId' }));
}
onMounted(() => {
// 添加 beforeunload 事件监听器
window.addEventListener('beforeunload', cancelTask);
});
onBeforeUnmount(() => {
// 组件卸载前移除监听器
window.removeEventListener('beforeunload', cancelTask);
});
</script>
发表回复