Navigator.sendBeacon()有什么应用场景?你必须知道的Web API?

发布时间:2023-05-31浏览次数:0

支持注册ChatGPT Plus的OneKey虚拟卡
绑定Apple Pay、Google Pay、支付宝和微信支付进行日常消费

注册和了解更多 ->

silver

Navigator.sendBeacon() 是一个 Web API,用于在浏览器后台异步发送 HTTP 请求。一般来说,发送请求时需要同步等待服务器的返回值,但使用 Navigator.sendBeacon() 可以在浏览器后台异步发送请求,而不必等待服务器的响应。它的常见应用场景有:

  1. 在页面卸载前收集数据。比如,当用户关闭页面或者浏览器时我们可能需要来发送一些数据给后端进行记录,这时使用 Navigator.sendBeacon() 会比使用其他 AJAX 库或者 Fetch API 更加可靠,特别是在一些不常见的浏览器终端上。

  2. 前端场景下的日志上报。如果需要在前端页面上传一些日志信息,通常可以使用 Navigator.sendBeacon() 来实现,不影响用户体验,无阻塞,易于集成。

  3. 在后台触发某些异步操作。如果需要在后台触发一些异步任务或书写后端日志等,可以通过前端代码发送请求,使用 Navigator.sendBeacon()

需要注意,Navigator.sendBeacon() 只支持发送 POST 请求,且数据必须是纯文本或者是 FormData 格式,不支持发送 JSON 格式的数据。对于其中的参数、请求头设置等更为详细的用法,可以参考 MDN 中对API的介绍。

字节笔记本扫描二维码查看更多内容