web项目实现用户退出网页前向后端发送请求

问题描述：

        在工作中有遇到这样一个需求，用户进入一个页面，要编辑页面内容前先点击“编辑”按钮，锁定编辑权限（则当前其他人不可编辑），编辑完后要释放权限得点下“结束编辑”释放权限。那么问题来了，且不说每次关闭页面前都要点“结束编辑”按钮比较麻烦，要是用户不小心退出了页面，那编辑权限就一直被占用。

解决思路：

        既然手动容易出错，那就再加个自动结束编辑的功能。在退出网页前（关闭浏览器、关闭/刷新页面）自动向后端发送一个结束编辑的请求。

解决方法：

在网页的卸载事件 unload 中用 window.navigator.sendBeacon(url,data) 向后端发送请求：

注意：因为浏览器通常会忽略在 unload 事件监听器中的 XMLHttpRequest 请求。谷歌浏览器也已经不允许页面关闭期间进行同步的 XMLHTTPRequest()，所以这里可以用window.navigator.sendBeacon(url,data)来发送请求，它是一个 Web API 方法，用于向服务器发送非阻塞性的 HTTP 请求。

这个方法常用于在用户关闭页面或浏览器之前，发送一些需要保存的数据。这个方法返回一个布尔值，表示请求是否成功发送。

• url：一个字符串，表示要发送请求的 URL。
• data：一个 Blob 或 ArrayBuffer，表示要发送的数据。这个参数是可选的，如果省略，那么请求将不包含任何数据

  window.addEventListener("unload", (e)=>{
        let formData = new FormData()
        formData.append("status","Y")
        formData.append("third_uid",getCookie("thirdUid"))
        formData.append("user_name",getCookie("userName"))
        window.navigator.sendBeacon("http://127.0.0.1:8080/lock",formData);
    });