javascript - 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 请求通常不是一个好主意，因为它们会在完成时呈现页面无响应。我不确定卸载期间同步请求的行为是什么。