分类： Vue

离开页面时调接口

场景：当前页面正在执行异步任务，当用户点击导航栏或直接关闭页面时，需调接口取消任务，减少资源浪费。

问题：如果在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>