一般情况下页面的请求需要在页面未销毁前才能正常执行,但是某些情况下,比如需要统计当前用户在页面的停留时间,需要记录在进入页面和离开页面时间,在离开页面的时间需要将停留时间请求接口保存到数据库,但是我们知道一般的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 }