用户在页面离开时发送http请求,如何成功

news/2024/4/25 13:39:12

项目场景:

用户在离开页面时,发送http请求给后端,用来收集用户日志数据进行业务分析


问题描述

在浏览器内多页面发生跳转时,无法保证当前页面进程内的请求能够顺利完成,大多数情况下会被浏览器cancled, 请求不能到达后端服务器。

这些http请求能否成功依赖于下面几点:网络连接速度、应用程序性能、甚至于外部服务器本身的配置,可以尝试用下面代码解决

document.getElementById('link').addEveentListener('click', (e) => {e.perventDefault();fetch("/log", {method: "post",headers: {"Content-Type": "application/json"},body: JSON.stringify({name: "123"})})window.location = e.target.href;
})

但 fetch 会被加入异步队列,页面跳转时队列中剩余的请求仍会被 cancled。

那我们等待请求完成之后再 location 不就行了吗?

document.getElementById('link').addEveentListener('click', async(e) => {e.perventDefault();await fetch("/log", {method: "post",headers: {"Content-Type": "application/json"},body: JSON.stringify({name: "123"})})window.location = e.target.href;
})

上述代码貌似可以,但是在移动端300ms延迟都能明显感受,万一接口返回太慢,用户就会觉得网站很卡

解决方案:

好在目前前端浏览器都是现代浏览器, fetch提供了 keeplive 参数来处理这个问题:

document.getElementById('link').addEveentListener('click', (e) => {fetch("/log", {method: "post",headers: {"Content-Type": "application/json"},body: JSON.stringify({name: "123"}),keepalive: true  // 设置保持请求})})

使用keepalive 不需要我们阻止默认行为,也不需要 location 跳转。就可以使这个请求发出去


另外

在axios 中也可以设置 keepalive,具体配置如下

是的,如果您创建自己的 axios 实例,您可以使用 axios 执行此操作。

const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'},httpAgent: new http.Agent({ keepAlive: true }),
});

https://www.xjx100.cn/news/3118955.html

相关文章

Golang中WebSocket和WSS的支持

引言 WebSocket是一种在单个TCP连接上进行全双工通信的协议,它为实时通信提供了一种简单而强大的方式。而WSS(WebSocket Secure)是一种通过加密的方式使用WebSocket的协议,可以在安全的传输层上进行通信。本文将探讨Golang中WebS…

设计模式-创建型模式之单例设计模式

文章目录 一、设计模式二、设计模式的六大原则三、设计模式分类四、单例设计模式 一、设计模式 设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般…

使用STM32微控制器实现烟雾传感器的接口和数据处理

烟雾传感器是常见的安全检测装置,通过检测空气中的烟雾浓度来提醒用户有潜在的火灾风险。本文将介绍如何使用STM32微控制器来实现烟雾传感器的接口和数据处理。包括硬件连接、采集模拟信号、数字信号处理和报警策略等方面。同时,给出相应的代码示例。 一…

Web安全漏洞分析-XSS(上)

随着互联网的迅猛发展,Web应用的普及程度也愈发广泛。然而,随之而来的是各种安全威胁的不断涌现,其中最为常见而危险的之一就是跨站脚本攻击(Cross-Site Scripting,简称XSS)。XSS攻击一直以来都是Web安全领…

人工智能对现代生活的影响

人工智能对现代生活的影响 本文旨在探讨人工智能(AI)对现代生活的巨大影响。通过分析AI在各个领域的应用,包括智能手机、智能家居和预测未来等方面,我们可以看到AI如何成为我们生活中的得力助手,提供便捷和智能的解决方…

深度学习框架:Pytorch与Keras的区别与使用方法

☁️主页 Nowl 🔥专栏《机器学习实战》 《机器学习》 📑君子坐而论道,少年起而行之 文章目录 Pytorch与Keras介绍 Pytorch 模型定义 模型编译 模型训练 输入格式 完整代码 Keras 模型定义 模型编译 模型训练 输入格式 完整代…

eNSP实验

前言 本文记录了使用eNSP进行组网,学习、巩固一些之前学的网络基础知识和协议。 一:同网段、网关互通 网络拓扑如下: AR1的配置: interface G0/0/0 ip address 192.168.10.1 24 PC1和PC2的配置(IP地址和网关设置) 最终实现PC1…

【产品设计】SaaS产品数据分析之指标与标签

数据分析能够应用到各个领域和岗位,那么在SaaS产品中的应用会是如何?本文将探索SaaS产品在数据分析中的应用,并对其指标与标签的设计进行总结分析,一起来看看吧。 数据分析是业务开展过程中,收集记录各种行为产生的数据…