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

项目场景:

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


问题描述

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

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

javascript 复制代码
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 不就行了吗?

javascript 复制代码
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 参数来处理这个问题:

javascript 复制代码
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 执行此操作。

javascript 复制代码
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'},
  httpAgent: new http.Agent({ keepAlive: true }),
});
相关推荐
思想是一切事物的源头1 小时前
渗透测试所需域名和IP信息收集方法
网络·网络协议·tcp/ip·安全性测试
xx.ii1 小时前
Zabbix模板,监控项,图形的使用方法
服务器·网络·zabbix
Cx330❀2 小时前
《Linux基础入门指令(二)》:从零开始理解Linux系统
linux·运维·服务器·网络·经验分享
明月与玄武2 小时前
Linux 网络分析终极武器:Tcpdump 深度指南!
网络·php·tcpdump
_dindong2 小时前
Linux网络编程:Socket编程预备
linux·运维·网络·学习
沐浴露z2 小时前
【深入理解计算机网络11】应用层详解:DNS,WWW,HTTP
服务器·网络协议·计算机网络·http
迎風吹頭髮3 小时前
Linux服务器编程实践22-TCP头部选项解析:MSS、窗口扩大因子与SACK
服务器·网络·tcp/ip
_dindong3 小时前
Linux网络编程:宏观网络体系
linux·网络·笔记·学习
想不明白的过度思考者3 小时前
JavaEE初阶——TCP/IP协议栈:从原理到实战
java·网络·网络协议·tcp/ip·java-ee
人邮异步社区3 小时前
内网攻防实战图谱:从红队视角构建安全对抗体系
网络·安全·web安全