javascript - 在 beforeUnload 上发送 ajax 调用被浏览器取消

Question

我有一个 Web 应用程序，当用户离开网站时，需要保存(ajax 调用)任何未保存的用户输入数据。

我正在使用“Fetch”在 beforeunload 事件监听器中执行 ajax 调用(保存数据)。但浏览器似乎取消了ajax调用(当我查看Chrome的网络面板时，预检选项调用被取消)。

jquery 有一种发送同步 ajax 调用的方法，但已被弃用。另外，解决方法是弹出浏览器指示的提示消息，让用户通过 beforeUnload 事件确认导航，但这不是业务需求所首选的。

那么有没有办法让Ajax调用打通呢？

下面是我的代码示例。 :

window.addEventListener('beforeunload', beforeUnloadHandler);

beforeUnloadHandler(event) {
    fetch(url, {
      method: 'PUT',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
        Authorization: api.AUTHORIZATION_HEADER
      },
      body: JSON.stringify(data)
    })
  }

Answer 1

我遇到了类似的问题，将 ajax 调用设置为非异步，效果非常好。

尝试将以下代码片段添加到您的 ajax 调用中:

$.ajaxSetup({ cache: false })
$.ajaxSetup({ async: false })