HTTP请求beforeunload：使用sendBeacon和img.src的区别

Question

在beforeunload处理程序的上下文中，fetch(keep-alive: true)和设置img标签的src属性之间的功能差异是什么？这两者中哪一个是进行GET请求的首选方法？

背景：

我想在JavaScript代码的beforeunload处理程序中发送HTTP GET请求。 Navigator.sendBeacon的文档讨论了它在此用例中的优点，但是

sendBeacon（）方法不提供自定义请求方法的能力

显然，几年前有很多请求要求此类功能，这导致使用fetch()，浏览器内部调用的方法sendBeacon，并设置一些特定的标志来解决unload请求问题的建议：

需要对这些请求进行非默认设置的应用程序应使用带有保持活动标志设置为true的FETCH API

fetch(url, {
  method: ..., 
  body: ...,            
  headers: ...,       
  credentials: 'include',
  mode: 'cors',
  keep-alive: true,
})

据我所知，这种类型的调用在功能上与Navigator.sendBeacon等效，关键设置是keep-alive: true。

显然，根据规范（重点在于我），HTML <img>标签也使用keep-alive: true。

请求有一个相关的保持活动标志...这可以用于允许请求超过环境设置对象的生存期，例如，navigator.sendBeacon和HTML img元素设置此标志

我理解这份文档的意思是，在img元素的src属性上进行GET请求相当于使用keep-alive: true调用fetch()，这本身就相当于调用sendBeacon（如果sendBeacon能够发出GET请求）。

这准确吗？

- Emmett Butler

Answer 1

根据 https://fetch.spec.whatwg.org/#request-class 的规定，应该使用 keepalive 而非 keep-alive。

除此之外，是的，fetch() 添加了这个功能来取代 sendBeacon() 的需要。

- Anne

---

img.src与sendBeacon之间的关系是什么，特别是在页面卸载期间keepalive及其有用性方面的关系？ - Emmett Butler

可能无法移除的遗留行为。 - Anne

听起来你是在说img.src和sendBeacon在beforeunload处理程序的上下文中确实是功能等效的。请明确确认并编辑您的答案。 - Emmett Butler

由于“img”并没有完全被认可，因此我不确定是否安全地假设它将来始终保持不变。 - Anne