能否使用unload事件+navigator.sendBeacon结合GraphQL向服务器发送数据？

当然可以实现！这是一种很靠谱的页面卸载时上报数据的方案，不过有几个关键细节需要注意，确保你的GraphQL请求能顺利发送成功：

核心可行性说明 #

unload事件 + navigator.sendBeacon完全可以结合GraphQL使用，sendBeacon是浏览器专门为页面卸载时的异步数据上报设计的API，它能绕过传统AJAX在unload时可能被中断的问题，保证请求被浏览器优先处理。

关键注意事项与代码示例 #

1. 事件选择：优先考虑visibilitychange做兼容
   虽然unload能监听标签页关闭，但部分浏览器（尤其是移动端）会对unload事件做节流处理，建议搭配visibilitychange事件（监听页面变为隐藏状态），覆盖更多场景比如用户切换App、最小化窗口等：

// 监听页面隐藏事件（覆盖更多卸载场景）
window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    this.sendDataToServer();
  }
});
// 保留unload作为兜底
window.addEventListener('unload', this.sendDataToServer, false);

2. 正确构造GraphQL请求体
   sendBeacon默认的Content-Type可能不匹配GraphQL的要求，需要把查询和变量打包成JSON格式的Blob，手动指定application/json类型：

sendDataToServer() {
  // 构造完整的GraphQL请求结构
  const graphqlPayload = JSON.stringify({
    query: `mutation EmailAuth($email: String!, $password: String!) {
      getOrCreateUser(email: $email, password: $password) {
        token
        // 这里补充你需要返回的字段
      }
    }`,
    variables: {
      email: 'user@example.com',
      password: 'your-password' // 注意：敏感数据请确保HTTPS传输，且评估是否有必要在卸载时发送
    }
  });

  // 用Blob设置正确的Content-Type
  const requestBlob = new Blob([graphqlPayload], { type: 'application/json' });

  // 发送Beacon请求
  const isSent = navigator.sendBeacon('/your-graphql-endpoint', requestBlob);

  // 降级处理：如果sendBeacon失败（比如超过数据大小限制），用fetch keepalive兜底
  if (!isSent) {
    fetch('/your-graphql-endpoint', {
      method: 'POST',
      body: requestBlob,
      keepalive: true,
      headers: { 'Content-Type': 'application/json' }
    });
  }
}

3. 额外注意点

• sendBeacon无法获取服务器响应结果，如果需要确认请求是否处理成功，只能依赖服务器端日志，或者用fetch keepalive（但它有请求大小限制，比如Chrome是64KB）。
• 确保你的GraphQL服务器支持POST请求，并且能正确解析application/json格式的请求体（绝大多数现代GraphQL服务都支持）。
• 敏感数据（比如密码）尽量避免在卸载时发送，优先在用户主动操作时完成请求，卸载上报更适合非敏感的行为统计类数据。

内容的提问来源于stack exchange，提问作者TitanFighter