覆盖浏览器后退按钮行为：避免请求被取消

核心问题原因 #

当浏览器触发beforeunload事件时，会暂停甚至终止当前页面的异步请求（包括fetch），即便用户选择取消离开，已经被中断的请求也无法自动恢复。

可行方案 #

方案1：给fetch添加keepalive参数 #

这是最直接的解决方式，keepalive选项允许浏览器在页面即将卸载的情况下，继续在后台完成请求，不会因为beforeunload的触发而中断。

// 点击按钮发起请求时添加keepalive
document.querySelector('#your-submit-btn').addEventListener('click', () => {
  const formData = new FormData(document.querySelector('#your-form'));
  
  fetch('/long-running-api', {
    method: 'POST',
    body: formData,
    keepalive: true, // 关键配置：确保请求不被页面卸载中断
    headers: {
      // 根据需求添加必要的请求头
    }
  })
  .then(response => response.json())
  .then(data => {
    // 处理服务器返回的结果
  })
  .catch(err => {
    // 处理其他非中断类错误
  });
});

// 绑定beforeunload提示
window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = '确定要离开吗？';
});

注意：keepalive有请求体积限制（通常为64KB），如果你的请求体超过这个大小，该方案可能不适用。

方案2：使用Service Worker代理请求 #

如果请求体积超出keepalive限制，可借助Service Worker接管请求，让请求在后台独立运行，不受页面状态影响。

1. 页面中注册Service Worker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('Service Worker 注册成功'))
    .catch(err => console.error('Service Worker 注册失败:', err));
}

2. Service Worker脚本（sw.js）

self.addEventListener('fetch', (event) => {
  // 拦截目标长时请求
  if (event.request.url.includes('/long-running-api')) {
    // 确保请求完成后再结束Service Worker生命周期
    event.waitUntil(
      fetch(event.request)
        .then(response => {
          // 可选：缓存响应结果，后续可返回给页面
          return response.clone();
        })
    );
    // 将响应返回给页面
    event.respondWith(fetch(event.request));
  }
});

方案3：中断后自动重试（需服务器配合） #

如果以上方案无法使用，可监听fetch的中断错误，在用户取消离开后自动重试请求。注意：需服务器端实现请求幂等性（比如通过唯一请求ID），避免重复处理同一请求。

let currentRequestData = null;
let isRequestInProgress = false;

function startLongRequest() {
  isRequestInProgress = true;
  fetch('/long-running-api', {
    method: 'POST',
    body: currentRequestData,
    headers: {
      'X-Request-ID': generateUniqueId() // 唯一请求ID，用于服务器幂等校验
    }
  })
  .then(response => response.json())
  .then(data => {
    isRequestInProgress = false;
    // 处理结果
  })
  .catch(err => {
    isRequestInProgress = false;
    // 判断是否为页面卸载导致的中断
    if (err.name === 'AbortError' || err.message.includes('canceled')) {
      // 检查页面是否处于活跃状态（用户取消了离开）
      if (!document.hidden) {
        startLongRequest(); // 重试请求
      }
    }
  });
}

// 点击按钮触发请求
document.querySelector('#your-submit-btn').addEventListener('click', () => {
  currentRequestData = new FormData(document.querySelector('#your-form'));
  startLongRequest();
});

// beforeunload提示
window.addEventListener('beforeunload', (event) => {
  if (isRequestInProgress) {
    event.preventDefault();
    event.returnValue = '确定要离开吗？';
  }
});

// 生成唯一请求ID的辅助函数
function generateUniqueId() {
  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}

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