为何Safari中onbeforeunload无法发送请求？Vue场景求解决方案

问题核心 #

Safari对beforeunload事件的异步请求处理逻辑和其他浏览器不同，它不会等待请求完成就会卸载页面，直接导致数据保存失败。

可行解决方案 #

1. 使用navigator.sendBeacon() #

这是浏览器专为页面卸载场景设计的API，会异步发送请求且浏览器会保证请求完成，兼容性覆盖Safari。

Vue中实现示例：

window.addEventListener('beforeunload', (event) => {
  // 组装要保存的数据
  const savePayload = JSON.stringify({
    // 你的业务数据
  });
  
  // 发送请求，后端需支持POST接收该格式数据
  navigator.sendBeacon('/api/save-data', savePayload);
});

注意：sendBeacon仅支持POST请求，且数据格式有一定限制，若需自定义请求头或其他请求方法，可使用下方方案。

2. 带keepalive参数的fetch请求 #

fetch的keepalive参数可让请求在页面卸载后继续执行，Safari 14及以上版本支持该特性。

Vue中实现示例：

window.addEventListener('beforeunload', async (event) => {
  const savePayload = {
    // 你的业务数据
  };
  
  await fetch('/api/save-data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(savePayload),
    keepalive: true // 关键配置，确保请求不被中断
  });
});

3. 实时保存替代方案 #

若上述方法仍有兼容性问题，可放弃页面卸载时批量保存，改为用户操作时实时保存：

• 用Vue的watch监听数据变化，数据修改就触发保存请求
• 搭配防抖（debounce）优化，避免频繁请求，比如用户停止操作1秒后自动保存

示例：

import _ from 'lodash';

export default {
  data() {
    return {
      formData: {}
    };
  },
  watch: {
    formData: {
      deep: true,
      handler: _.debounce(function(newVal) {
        this.saveData(newVal);
      }, 1000)
    }
  },
  methods: {
    async saveData(data) {
      await fetch('/api/save-data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });
    }
  }
};

注意事项 #

• 不要在beforeunload中使用同步XMLHttpRequest，会阻塞页面卸载，严重影响用户体验
• 测试需在真实Safari环境下进行，模拟环境可能和真实浏览器行为存在差异

内容的提问来源于stack exchange，提问作者Gleb-Shalygin