HTTP请求卸载前: sendBeacon vs img.src

Question

在beforeunload处理程序的上下文中，fetch(keep-alive: true)与设置img标记的src属性之间的功能区别是什么，其中哪一种是发出GET请求的首选方法？

背景：

我想在beforeunload处理程序中用JavaScript代码发送HTTP请求。Navigator.sendBeacon的文档讨论了它对这个用例，但有多好。

sendBeacon()方法没有提供自定义请求方法的能力

显然，在几年前，这种功能有很多请求，达到顶点在推荐中使用fetch()，这是一种由sendBeacon在内部调用的浏览器方法，设置了一些特定的标志来解决unload请求问题：

需要为此类请求设置非默认设置的应用程序应该使用FETCH API，并将其保持活动标志设置为true。

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

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

很明显，HTML <img>标签也是按照规范( keep-alive: true )来标记的：

一个请求有一个相关的保活flag...This可以用来允许请求超过环境设置对象，例如，navigator.sendBeacon和 HTML元素设置此标志。

我对这个文档的理解是，通过一个GET元素的src属性在unload上提出一个src请求在功能上等同于用keep-alive: true调用fetch()，这本身在功能上相当于调用sendBeacon (如果sendBeacon可以发出GET请求)。

这个准确吗？

Answer 1

按照https://fetch.spec.whatwg.org/#request-class的说法，这是keepalive，而不是keep-alive。

除此之外，是的。这个特性被添加到fetch()中，以淘汰对sendBeacon()的需求。