如何在浏览器关闭、刷新时成功调用接口

场景/问题

用户登录后，前端不主动调退出登录接口，服务端还是记录着用户的登录状态，当刷新浏览器或者关闭页签或者关闭整个浏览器时，传统的XMLHttpRequest会被浏览器取消，请求无法达到后端。

解决方案

上面提到传统的XMLHttpRequest会在浏览器关闭时被取消，那怎样解决发起的网络请求在浏览器关闭时不会被取消呢？Fetch的keepalive属性解决了这个问题，它能确保浏览器在关闭后仍然能送达服务器。

代码实现

window.onbeforeunload = () => {
      // 从sessionStorage中获取token
      const token = getToken()
      // token不存在，不需要调退出登录接口
      if (!token) return
      // 从sessionStorage中移除token
      removeToken()
      fetch('/token', {
        // 好处是不限制请求类型
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          'X-Token': token
        },
        keepalive: true // 重点：保持连接，不关闭
      })
}