在用户关闭页面，或跳转到其他页面时，需要向服务器发送请求。常规方案是在unload或者beforeunload事件中，使用XMLHttpRequest发送请求。
默认情况下，XHR请求(使用fetch或XMLHttpRequest)是异步非阻塞的，一旦请求排队后，请求的实际处理就会移交浏览器。取决于网络连接、程序性能、服务器配置等等因素，极有可能在它即将发送时，页面已经卸载，从而导致发送失败或者发送被取消。
为避免异步请求被取消，一种解决方式是换成同步XMLHttpRequest请求。但是，这会阻塞页面的卸载和跳转，导致屏幕出现“冻结”和无响应的用户体验。
同时，Chrome/Edge浏览器已经不允许页面关闭期间，在如下事件中进行同步的XMLHttpRequest调用：beforeunload, unload, pagehide, 以及visibilitychange
Disallow sync XHR in page dismissal - Chrome Platform Status ()
为确保页面在卸载时将数据发送到服务器，官方建议使用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 或 BlobformData.append(k, JSON.stringify(postdata[k]));} else {formData.append(k, postdata[k]);}}navigator.sendBeacon(action, formData);
参考：
/p/532162177
/qq_29722281/article/details/125553696
如果觉得《Chrome不允许在页面关闭或导航跳转时发送同步请求》对你有帮助，请点赞、收藏，并留下你的观点哦！
