如何实现无需等待响应的JS HTTP请求，解决页面跳转阻塞问题

核心原因 #

浏览器在页面卸载（跳转、刷新等场景）时，会等待所有未完成的网络请求结束——哪怕是异步请求也不例外，这就是你尝试Worker、navigator.sendBeacon、fetch后依然无法立即跳转的根本原因。

可行解决方案 #

1. 用fetch结合keepalive参数（推荐） #

keepalive会告诉浏览器：即使页面卸载也要保持请求存活，同时不会阻塞页面跳转逻辑。

function _processQueue() {
  fetch("Command/Process", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({}), // 无参数时传空对象即可
    keepalive: true // 关键配置
  }).catch(() => {}); // 直接忽略所有错误，无需处理响应
}

调用该函数后可立即执行跳转（比如window.location.href = "/target-page"），浏览器不会等待请求完成。

2. 优化navigator.sendBeacon的使用 #

sendBeacon本身就是为“即发即弃”场景设计的，但要注意数据格式兼容性：

function _processQueue() {
  // 把JSON转为Blob格式，适配sendBeacon的要求
  const requestData = new Blob([JSON.stringify({})], { type: 'application/json' });
  navigator.sendBeacon("Command/Process", requestData);
}

注意：sendBeacon仅支持特定类型的请求体（Blob、FormData、字符串等），如果服务器要求自定义Header，优先选fetch+keepalive方案。

3. 废弃Worker里的xhr.abort()操作 #

你之前在Worker中调用xhr.abort()会直接中断请求，服务器可能还没接收到完整指令就终止了任务触发。Worker本身是独立线程，但依然会被浏览器的卸载等待机制影响，不如前面两种方案高效。

关键注意事项 #

• 无需处理请求响应，所以所有回调、Promise链式调用都可以直接忽略，调用任务触发函数后立即执行跳转。
• 确保服务器接口是幂等的，能处理重复触发的极端情况（网络波动可能导致请求重试）。
• 跳转前不要加任何同步耗时操作（比如大量DOM处理、计算），避免延迟跳转。

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