vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求

• • 1.需求背景：
  • 2.需求分析：
  • 3.实现方式：
  • 4.实现方式解析：
  • • • 1）浏览器页面事件基础
      • 2）在mounted监听beforeunload和unload事件
    • 5.存在的问题/风险点：
    • • • 1）为了避免意外弹出窗口，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，直接执行关闭/刷新操作是不会弹出提示框的；
        • 2）浏览器提示框的样式和内容是默认的，不能更改；
        • 3）在关闭/刷新页面前发送的请求，如果使用axios方式，由于是异步的，在执行刷新/关闭操作时，存在请求还未发送到服务端就被浏览器cancle掉。Fetch API提供了一套健壮的与服务器端交互的方式，提供了跨越不同平台 API 的一致接口。它提供了一个keepalive属性，保证不管发送请求的页面关闭与否，请求都会持续直到结束。不过上传数据的限制是64 KB。
        • 4）在执行刷新页面操作时，触发请求，在控制台中会发现该请求一直在pending状态中，但其实服务器端已经接收到该请求，亲测有效！

        用户离开页面前，修改数据未进行保存操作，提示框提醒用户，并发送接口请求告知后端清空已修改数据。

        2.需求分析：

        可以再在beforeDestory钩子函数中，调用接口操作，但该方法只能实现路由切换，当前组件销毁时会触发，不能解决浏览器页面关闭和页面刷新触发该请求，所以还是要借助window.onbeforeunload事件。

        3.实现方式：

        mounted() {
                window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
                window.addEventListener('unload', this.updateHandler);
        beforeunloadHandler(e) {
                e = e || window.event;
                if (e) {
                    e.returnValue = '关闭提示';
                return '关闭提示';
        updateHandler() {
                fetch('url', {
                    method: 'POST',
                    body:'参数'
                    headers: {'Content-Type': 'application/json'},
                    keepalive: true
                });
        4.实现方式解析：
         
        1）浏览器页面事件基础
         
        页面加载时只执行 onload 事件。
         页面关闭时，先 onbeforeunload 事件，再 onunload 事件。
         页面刷新时先执行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件。
         
        2）在mounted监听beforeunload和unload事件
         
        当执行页面刷新关闭操作时，会触发onbeforeunload事件，在该事件绑定的方法中，return一个值（为true的值）浏览器会弹出一个提示框，否则不会弹出，提示框如下图所示
         
         
        当点击取消按钮时，会阻断，不会执行任何操作，当点击重新加载/离开按钮时会触发unload事件，在该事件中调用请求方法即可。
         
        5.存在的问题/风险点：
         
        1）为了避免意外弹出窗口，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，直接执行关闭/刷新操作是不会弹出提示框的；
         
        2）浏览器提示框的样式和内容是默认的，不能更改；
         
        3）在关闭/刷新页面前发送的请求，如果使用axios方式，由于是异步的，在执行刷新/关闭操作时，存在请求还未发送到服务端就被浏览器cancle掉。Fetch API提供了一套健壮的与服务器端交互的方式，提供了跨越不同平台 API 的一致接口。它提供了一个keepalive属性，保证不管发送请求的页面关闭与否，请求都会持续直到结束。不过上传数据的限制是64 KB。
         
        4）在执行刷新页面操作时，触发请求，在控制台中会发现该请求一直在pending状态中，但其实服务器端已经接收到该请求，亲测有效！
        
        有些时候，我们切换到一个请求会消耗比较长时间的页面中
        而如果此时切换到其它页面，这些未完成的请求会影响下个页面的数据载入，也就是说，下面页面中的请求会在前一个页面请求完成后才执行。
        那么有什么办法取消这些未完成的请求呢？
        取消 axios 请求的方法
        官方取消请求的说明： https://github.com/axios/axios#cancellation
        官方介绍了好三个取消请求的方法，CancelToken 的形式已经被废
        要求在页面关闭时，向后端发送一个请求。但是有时候会请求成功，有时候后端不会收到请求
        		mounted() {
        			this.messageWrapper = document.querySelector("#message-wrapper");
        			window.addEventListener('unload', this.deleteSentence, false)
        		methods: {
        			deleteSentence() {
        beforeRouteLeave(to, from, next) { // 离开路由之前 ，判断一下是不是跳到下一个页面 // 是否保存当前页面
            // console.log(to.path, '查看路径，跳转的路径')
            const path = '/intelligent-water/wa