在项目中遇见 「需要在页面关闭时发送请求以获得用户关闭时间,用来计算用户网页浏览时长」 的需求
首先是使用 window.$.ajax 方法正常发送请求,但是async:false的情况下接口报错 NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load xxxx(具体原因可百度)
,将async设置为true则时而无法请求成功,这是因为如果请求是异步,页面关闭速度快于接口返回速度,则请求无法完成
后来发现navigator.sendBeacon(url,data)
方法,可完美解决此问题,其有两个参数
url:请求地址
data:请求数据(多种类型)
具体可查:https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
因为接口本身是POST请求,所以数据为formData格式
需进行数据转换
const log =()=>{
//param参数
const data = { a, b, c };
//新建formData数据
const formData = new FormData();
//数据转换
Object.keys(data).forEach((key) => {
let value = data[key];
if (typeof value !== "string") {
// formData只能append string 或 Blob
value = JSON.stringify(value);
}
formData.append(key, value);
});
//请求
navigator.sendBeacon(url,formData);
}
//页面关闭事件中触发
window.addEventListener("pagehide", () => {
log();
});
最后完美解决!