navigator.sendBeacon()

navigator.sendBeacon()：是一个用于发送数据的 API，通常用于在页面卸载或关闭时发送数据，以确保数据被成功发送到服务器。相比于其他的 AJAX 请求，navigator.sendBeacon() 具有更高的可靠性和更低的延迟。

1. navigator.sendBeacon(url, data);
• url 表示请求的 URL，data 表示需要发送的数据，可以是一个字符串、一个 FormData 对象或者一个 Blob 对象。需要注意的是，navigator.sendBeacon() 方法发送的是一个异步请求，无法获取服务器返回的响应。

            
                window.addEventListener('beforeunload', function(event) { 
                    let formData = new FormData();
                    formData.append('abc', 'xyz'); 
                    navigator.sendBeacon('path', formData); 
                });
            
        

• 需要注意的是，由于 navigator.sendBeacon() 方法发送的是一个异步请求，因此无法获取服务器返回的响应。如果需要获取服务器返回的响应，可以使用其他的 AJAX 请求方法，例如 fetch() 或者 XMLHttpRequest。
• 另外，需要注意的是，由于 navigator.sendBeacon() 方法是一个异步请求，因此它的执行顺序可能与其他的代码不同，这可能会导致一些意外的结果。因此，在使用 navigator.sendBeacon() 方法时，需要特别注意代码的执行顺序和逻辑。
2. 也可以使用 fetch() 方法的 keepalive 选项
• keepalive 选项可以让浏览器在页面关闭后继续发送请求，直到请求完成或超时。需要注意的是，keepalive 选项只能在支持 AbortController 接口的浏览器中使用。

            
                const controller = new AbortController();
                const signal = controller.signal;
                fetch('path', {
                    method: 'POST',
                    body: JSON.stringify(data),
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    keepalive: true,
                    signal: signal
                })
                .then(response => console.log(response))
                .catch(error => console.error(error));
            
        

• 这里的代码使用 fetch() 方法发送 POST 请求，并将 keepalive 选项设置为 true，以保持连接。同时，还创建了一个 AbortController 对象和一个 AbortSignal 对象，用于在需要时终止请求。