前端关闭页面前发送请求

需求描述：

当用户关闭/刷新页面后，发送请求通知后端

监听事件：beforeunload

使用axios发送异步请求发现，刷新时后端可以接收到请求，但是页面关闭时后端无法接收请求

navigator.sendBeacon()

文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
此api时专门用于处理页面卸载前发送数据发送http请求的，并且可以保证页面关闭后请求还能发送

语法

navigator.sendBeacon(url, data);

参数
● url 表明 data 将要被发送到的网络地址。
● data 参数是将要发送的 ArrayBufferView 或 Blob 、DOMString 或者 FormData 类型的数据

sendBeacon()会根据传入的数据自动设置请求头，数据类型和对应Content-Type如下：
○ Formdata：multipart/form-data
○ DOMString：text/plain
自己根据后端api的设计选择相应的data类型

返回值
当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。

具体实现

window.addEventListener('beforeunload', (e) => {
  const url = 'xxxx';
  let formData = new FormData();
  formData.set('name', 'test');
  formData.set('age', '182');
  formData.set('openstate', 0);
  window.navigator.sendBeacon(url, formData);
});