beforeunload 函数中的 Axios 调用仅在刷新时有效（ReactJS）

Question

我需要让服务器知道用户何时关闭或重新加载页面。我正在收听 "beforeunload" 事件，当函数被调用时，我正在向服务器发送一个 axios 调用。刷新页面时有效，关闭页面时无效，我不知道如何解决。

这是我的代码

  componentDidMount() {
    window.addEventListener("beforeunload", this.endSession);
  }

  componentWillUnmount() {
    window.removeEventListener("beforeunload", this.endSession);
  }

  endSession = (e) => {
    axios
      .post(Globals.backendServer + "/session/end", {
        sessionData: this.state.sessionData,
      })
      .then((res) => {})
      .catch((err) => {
        alert(err);
      });
  };

Answer 1

无法保证在beforeunload事件中执行的异步操作一定会完成，axios使用异步方式发出请求。

您或许可以使用良好的旧 XHR 来制作 synchronous request。如果您转到标记为 Adapting Sync XHR use cases to the Beacon API 的部分，他们将讨论在卸载期间保持请求活动的策略，因为不推荐使用同步 XHR。

请注意，同步 HTTP 请求通常不是一个好主意，因为它们会在完成时呈现页面无响应。我不确定卸载期间同步请求的行为是什么。

Answer 2

不幸的是 unload 和 beforunload 生命周期对于 Ajax 请求不可靠，我更喜欢使用服务器端的令牌和刷新令牌处理即使当您检测到关闭的页面时，您如何定义当用户可以打开多个选项卡时关闭的选项卡或页面

beforeunload 函数中的 Axios 调用仅在刷新时有效（ReactJS）

Axios call in beforeunload function only works when refreshing (ReactJS)

javascript

onbeforeunload

reactjs

axios