Fetch Keep Alive 未按预期工作

Question

我正在开发 AngularJS 1.6 版本。 在我的 app.controller.js 中，我添加了三个事件监听器并附加了一个 deleteStudent 方法。

window.addEventListener('beforeunload', this.deleteStudent, false);
    window.addEventListener(
      'unload',
      () => {
        this.deleteStudent
      },
      false
    );
    window.addEventListener('pagehide', this.deleteStudent, false);

deleteStudent() {
 let Url = "http://localhost:9000/students/3";
    const deleteMethod = {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json'
      },
      keepalive: true
    };
    fetch(Url, deleteMethod);
}

API 调用未到达后端，但在 chrome 网络选项卡上列为 pending 状态。

*上面使用的删除 API 是在 Node js 中创建的，并且可以在 postman 中正常工作。

我必须仅在页面卸载时调用此 API，建议使用具有 keep-alive 属性 true 的 fetch API 或使用 sendBeacon( )，但我的后端 API 是 DELETE 类型，因此我不能使用 sendBeacon()，因为它只支持 POST。

Answer 1

我有同样的问题。带有 keepalive 的 Fetch API 在 Chrome 上运行良好，但在 Firefox 上非常不可靠。请求大部分时间都没有到达服务器。

作为一个 hack，在调用 Fetch API 后，我不得不使用以下代码将窗口关闭/刷新延迟 0.5 秒：

beforeUnloadHandler() {
    fetch(`http://localhost:8080/api', {
    keepalive: true,
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify(payload),
  });
    const time = Date.now();
    while ((Date.now() - time) < 500) {

    }
    return true;
  }

是的，我确实意识到这段代码很难看。但是绝望的时候！！！