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

Question

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

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

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 调用设置为 非异步 时，它运行良好。

尝试将以下 sn-p 添加到您的 ajax 调用中：

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