[移动开发]微信页面关闭时接口提交数据

搜索到很多文章说使用同步请求，但真机测试时发现无论ios或安卓都是失败的，请求并没有发送成功。

推荐使用Navigator.sendBeacon()

真机测试IOS及Android都没问题，双端的微信内置浏览器接口也都提交成功

//sendBeacon是浏览器事件
//以post方式提交数据
//无返回值
navigator.sendBeacon(url, formData)

react完整请求示例

// 监听页面关闭或刷新
useEffect(() => {
        if (window.addEventListener) {
            window.addEventListener("pagehide", function () { // IOS
                listener()
            })
        } else {
            window.onbeforeunload = function () { // 安卓
                listener();
            }
        }
}, [])
// 请求接口提交数据
const listener = () => {
        //页面关闭时数据已被回收，无法取值。改为缓存读写
        //要传的数据
        let putData = {
            slide_screen: window.scrollY,
            screen_height: window.screen.height,
            user_token: getStorageSync('user_token'),
        }
        //数据转成formData 看后端的接收方式
        const formData = new FormData();
        Object.keys(putData).forEach((key) => {
            let value = putData[key];
            if (typeof value !== 'string') {
                value = JSON.stringify(value);
            }
            formData.append(key, value);
        });
        const url = 'https://xxx.xxxxx.com/api/xx'
        //判断浏览器是否支持sendBeacon
        if (navigator.sendBeacon) {
            navigator.sendBeacon(url, formData)
        } else {
        	//不支持时 尝试ajax同步请求
            const xhr = new XMLHttpRequest()
            xhr.open('POST', url, false) // 同步请求
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(formData)
        }
        removeStorageSync('behaviorId')
};