javascript - 我可以将 beforeunload 事件延迟足够长的时间，以便我可以确保 POST 请求以对用户来说最不烦人的方式通过吗？无法使用发送信标

Question

我无法使用 sendBeacon，因为我需要发送 Bearer 令牌，而且您可以使用 sendBeacon 发送的唯一标头似乎是内容类型。

我有一个存在“可用”、“正在通话”或“请勿打扰”的用户。我的问题是，现在，如果用户是“IN CALL”，然后他们退出浏览器或关闭选项卡，他们的存在不会从“IN CALL”变为默认的“AVAILABLE”。然后，如果他们再次加载网站，即使他们不再通话，他们的状态仍然是“通话中”。

这就是为什么我决定在 componentDidMount() 中添加一个 beforeunload 事件侦听器，该侦听器向后端发出 POST 请求，以便将存在更改为默认的“AVAILABLE”。我的第一个问题是大多数时候，POST 请求无法通过。我认为请求没有通过，因为它正在与关闭的浏览器竞争，并且失败了。

我的问题是我怎样才能 100% 确保 POST 请求将在浏览器/选项卡关闭之前通过？

目前我正在处理这个：

componentDidMount() {
  window.addEventListener('beforeunload', this.onBeforeUnload);
}

和：

  onBeforeUnload = (event) => {
    try {
      const headers = {
        Authorization: `Bearer ${getAccessToken()}`,
        'Content-Type': 'application/json',
      };
      const defaultPresence = {
        presence: 'AVAILABLE',
        message: '',
      };
      const url = getServerURL() + urls.PRESENCE;

      fetch(
        url,
        {
          method: 'POST',
          headers,
          body: JSON.stringify(defaultPresence),
        },
      );
    } catch (error) {
      console.log(error);
    }
  }

标签： javascriptreactjsfetch