1. 用户卸载网页的时候，有时需要向服务器发一些数据。很自然的做法是在unload事件或beforeunload事件的监听函数里面，使用XMLHttpRequest对象发送数据。但是，这样做不是很可靠，因为XMLHttpRequest对象是异步发送，很可能在它即将发送的时候，页面已经卸载了，从而导致发送取消或者发送失败。
上报数据的方法
1. 我们可以将 ajax 请求改为同步方法，这样就能保证请求一定能发送到服务端。由于 fetch 及 axios 都不支持同步请求，所以需要通过 XMLHttpRequest 发送同步请求。这里要注意的是，将请求改为同步以后，会阻塞页面关闭或重新加载的过程，这样就会影响用户体验。
2. 动态图片
我们可以通过在 beforeunload 事件处理器中创建一个图片元素并设置它的 src 属性的方法来延迟卸载以保证数据的发送，因为绝大多数浏览器会延迟卸载以保证图片的载入，所以数据可以在卸载事件中发送。
[cc lang=”js”]const reportData = (url, data) => {
let img = document.createElement(‘img’);
const params = [];
Object.keys(data).forEach((key) => {
params.push(`${key}=${encodeURIComponent(data[key])}`);
});
img.onload = () => img = null;
img.src = `${url}?${params.join(‘&’)}`;[/cc]
此时服务端可以返回一个 1px * 1px 的图片，保证触发 img 的 onload 事件，但如果某些浏览器在实现上无法保证图片的载入，就会导致上报数据的丢失。
3. sendBeacon
为了解决上述问题，便有了 navigator.sendBeacon 方法，使用该方法发送请求，可以保证数据有效送达，且不会阻塞页面的卸载或加载，并且编码比起上述方法更加简单。
navigator.sendBeacon(url, data);
url 就是上报地址，data 可以是 ArrayBufferView，Blob，DOMString 或 Formdata，根据官方规范，需要 request header 为 CORS-safelisted-request-header，在这里则需要保证 Content-Type 为以下三种之一：
application/x-www-form-urlencodedmultipart/form-datatext/plain
如果数据类型是 string，则可以直接上报，此时该请求会自动设置请求头的 Content-Type 为 text/plain。
[cc lang=”js”]const reportData = (url, data) => {
navigator.sendBeacon(url, data);
}[/cc]
如果用 Blob 发送数据，这时需要我们手动设置 Blob 的 MIME type，一般设置为 application/x-www-form-urlencoded。
[cc lang=”js”]const reportData = (url, data) => {
const blob = new Blob([JSON.stringify(data), {
type: ‘application/x-www-form-urlencoded’,
}]);
navigator.sendBeacon(url, blob);
};[/cc]
可以直接创建一个新的 Formdata，此时该请求会自动设置请求头的 Content-Type 为 multipart/form-data
[cc lang=”js”]const reportData = (url, data) => {
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);
};[/cc]