解决:页面刷新时 ajax/fetch请求状态变为canceled
表现如下图:
原因:页面刷新后,页面已经被销毁,但异步请求还没完成,页面就会主动把未完成的请求取消掉,这时的请求是还没到服务器的。
两个解决方案:https://web.dev/disallow-synchronous-xhr/
我试了第一个,代码如下:
window.addEventListener('unload', {
fetch('/siteAnalytics', {
method: 'POST',
body: getStatistics(),
keepalive: true
});
}
效果:
页面控制台上看是pending,但服务器确认是已经收到请求了。
同样道理,用SendBeacon() 一样可行,但fetch方法比较好定制参数