在用户关闭页面,或跳转到其他页面时,需要向服务器发送请求。常规方案是在unload或者beforeunload事件中,使用XMLHttpRequest发送请求。
默认情况下,XHR请求(使用fetch或XMLHttpRequest)是异步非阻塞的,一旦请求排队后,请求的实际处理就会移交浏览器。取决于网络连接、程序性能、服务器配置等等因素,极有可能在它即将发送时,页面已经卸载,从而导致发送失败或者发送被取消。
为避免异步请求被取消,一种解决方式是换成同步XMLHttpRequest请求。但是,这会阻塞页面的卸载和跳转,导致屏幕出现“冻结”和无响应的用户体验。
同时,Chrome/Edge浏览器已经不允许页面关闭期间,在如下事件中进行同步的XMLHttpRequest调用:beforeunload, unload, pagehide, 以及 visibilitychange
Disallow sync XHR in page dismissal - Chrome Platform Status (chromestatus.com)
为确保页面在卸载时将数据发送到服务器,官方建议使用sendBeacon()或Fetch keep-alive。
Fetch keepalive
Fetch API提供了一种处理服务器交互的强大方法,以及一个跨平台API使用的一致接口。keepalive选项设置为true,则即使发起该请求的页面已经终止,也能确保请求继续执行。
chrome浏览器有负载限制:64KB。请求为"高"优先级。
window.addEventListener('unload', {
const data = { username: 'example' };
fetch('/xxxurl', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
keepalive: true
});
});
Body可以是如下任意类型:ArrayBuffer,ArrayBufferView,Blob/File,string,URLSearchParams,FormData
var postdata = {};
postdata["username"] = "example";
postdata["password"] = "123";
formBody = new URLSearchParams();
for(let k in postdata) {
if(typeof(postdata[k]) === 'object') {
formBody.append(k, JSON.stringify(postdata[k]));
} else {
formBody.append(k, postdata[k]);
}
}
const options = {
credentials: 'include',
method: 'POST',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
},
body: formBody,
keepalive: true
}
fetch('/url', options);
Navigator.SendBeacon()
SendBeacon实际底层使用的是Fetch API。所以可以确保页面卸载后请求继续,也同样具有chrome浏览器有64KB的负载限制。只能发送POST请求。请求为"最低"优先级。
数据可以是如下任意类型:ArrayBuffer,ArrayBufferView,Blob,DOMString,FormData,URLSearchParams。
自定义请求头Content-Type必须是以下三种之一:
"text/plain","application/x-www-form-urlencoded","multipart/form-data"
如果数据类型是DOMString,则默认Content-Type为"text/plain":
navigator.sendBeacon(url, data);
如果数据类型是Blob,则Content-Type一般设置为"application/x-www-form-urlencoded":
const blob = new Blob([JSON.stringify(data), {
type: 'application/x-www-form-urlencoded',
}]);
navigator.sendBeacon(url, blob);
如果想要以"application/json"的形式发送数据,则需要使用Blob适当调整:
const blob = new Blob([JSON.stringify({ some: "data" })], {
type: 'application/json; charset=UTF-8'
});
navigator.sendBeacon('/log', blob));
如果数据类型是FormData,则直接创建FormData,此时Content-Type会自动设置为"multipart/form-data":
const formData = new FormData();
for(let k in postdata) {
if(typeof(postdata[k]) !== 'string') {// formData只能append string 或 Blob
formData.append(k, JSON.stringify(postdata[k]));
} else {
formData.append(k, postdata[k]);
}
}
navigator.sendBeacon(action, formData);
参考:
https://zhuanlan.zhihu.com/p/532162177
https://blog.csdn.net/qq_29722281/article/details/125553696