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

ppylox
·4/6/2022·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

页面销毁后普通 Ajax 请求会中断,Vue 的 beforeDestroy 也无法保证完成。浏览器提供 navigator.sendBeacon 方法,可在页面销毁时异步发送数据而不被中断。文章给出封装函数 sendBeacon(url, data):检测浏览器支持后,将数据 JSON 序列化并构造 Blob(类型 application/x-www-form-urlencoded),调用 navigator.sendBeacon 发送,不支持则返回 false。适用于统计用户停留时间等离开页面时上报场景。

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


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


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


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

相关文章