Fetch Keep Alive 未按预期工作

Posted 2023-05-07

【中文标题】Fetch Keep Alive 未按预期工作

【英文标题】：Fetch Keep Alive is not working as expected

【发布时间】：2021-08-17 15:09:30

【问题描述】：

我正在开发 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。

【问题讨论】：

您好。您在问题中没有提供太多关于您的问题的信息。你得先定位问题——是事件监听回调没有被调用的问题吗？您可以使用断点进行验证，请注意这些事件不会可靠地触发developer.mozilla.org/en-US/docs/Web/API/Window/…。还是调用回调但请求以某种方式失败的问题？同样，在页面导航之间保留日志或设置断点可能会有所帮助。

嗨@DanMacák，事件侦听器回调被调用，如果我在获取后在断点处暂停后检查网络选项卡，那么我可以看到 API 调用被触发 pending状态，但它没有到达后端 API。

我尝试了您的代码示例，对我来说它在 Chrome 中运行良好。是的，我也得到了 pending 状态，但是当我检查我的代理 (Fiddler) 时，我看到服务器为 DELETE 请求 dummy.restapiexample.com/api/v1/delete/719 返回了 200 响应。那么你真的确定请求没有命中你的服务器吗？如果没有，它是否适用于上面的虚拟端点？

【参考方案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;
  

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

【讨论】：

"但它在 Firefox 上非常不可靠....." 是的，我同意 Firefox 必须在所有场景页面重新加载/关闭选项卡/浏览器关闭（包括 Firefox 移动浏览器）上可靠地支持它。此外，您延迟 0.5 秒以在关闭前保存关键数据非常好，非常感谢！

Firefox 和 Safari 在 beforeUnload 事件上的 fetch API 行为仍然很糟糕。他们应该提供一致的支持。 Chrome 和 Edge 看起来更好，更有前途。