用户在页面离开时发送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 }),
});
相关推荐
Fireworkitte1 小时前
gRPC和http长轮询
网络·网络协议·http
LuLaLuLaLeLLLLLL2 小时前
RPC 框架学习笔记
网络·网络协议·rpc
冰橙子id2 小时前
linux-远程访问管理(sshd,scp,sftp)
linux·网络·ssh
橘子在努力5 小时前
【橘子分布式】Thrift RPC(理论篇)
分布式·网络协议·rpc
liulilittle6 小时前
.NET ExpandoObject 技术原理解析
开发语言·网络·windows·c#·.net·net·动态编程
委婉待续7 小时前
计算机网络通信的相关知识总结
开发语言·网络
不超限7 小时前
IIS错误:Service Unavailable HTTP Error 503. The service is unavailable.
网络·网络协议·http
.YYY9 小时前
网络--静态路由综合实验
网络·计算机网络
CZZDg9 小时前
Redis Sentinel哨兵集群
java·网络·数据库
tan77º9 小时前
【Linux网络编程】应用层自定义协议与序列化
linux·运维·服务器·网络·c++·tcp/ip