如何在在页面销毁后异步发送数据

一般情况下页面的请求需要在页面未销毁前才能正常执行，但是某些情况下，比如需要统计当前用户在页面的停留时间，需要记录在进入页面和离开页面时间，在离开页面的时间需要将停留时间请求接口保存到数据库，但是我们知道一般的ajax请求在页面销毁后会中断，也就是在页面销毁前请求接口，下一秒页面就销毁了，有可能接口还未请求成功，那么此时操作已经中断。

在vue项目中，可以在beforeDestroy周期内请求接口，但是同样会出现这个结果。

不过浏览器本身是支持这个功能的，即通过navigator.sendBeacon 方法请求接口，计时页面销毁也能正常执行，不用担心页面关闭请求中断的问题。

//在页面销毁期，可以异步的发送数据
  function sendBeacon(url, data) {
    if (navigator.sendBeacon) {
      let headers = {
        type: 'application/x-www-form-urlencoded'
      };
      let blob = new Blob([JSON.stringify(data)], headers);
      return navigator.sendBeacon(url, blob);
    } else {
      return false
    }
  }

本文章由javascript技术分享原创和收集