异步加载 js 会阻塞什么（JS面试之异步模拟超时重传机制详解）

时间2025-05-01 16:56:36分类IT科技浏览3447

导读：引言前面我讲解了两篇有关异步的逻辑思维题目，一个是红绿灯转换，还有一个是异步并发限制。有小伙伴私信我说不过瘾，希望还能再出一篇异步超时重传的讲解。为了满足这位粉丝的小小要求（我尼玛），我查询了相关资料和面试题，确实发现这是某大肠面试的代码设计题。不得不说这位粉丝发现的这个题目是相当亮眼，相当给力。...

引言

前面我讲解了两篇有关异步的逻辑思维题目，一个是红绿灯转换，还有一个是异步并发限制。有小伙伴私信我说不过瘾，希望还能再出一篇异步超时重传的讲解。为了满足这位粉丝的小小要求（我尼玛），我查询了相关资料和面试题，确实发现这是某大肠面试的代码设计题。不得不说这位粉丝发现的这个题目是相当亮眼，相当给力。

题目分析

超时重传机制，看到这个词语想必科班同学都十分十分熟悉吧。大家第一时间肯定会想到计算机网络中tcp的超时重传。不错，此处的异步模拟超时重传机制和计算机网络的超时重传原理是几乎一样的。二者的唯一区别就在于一个作用在tcp的可靠传输上，而本节我们的超时重传是作用在前端请求数据接口上。

性感例子

正直18岁的单身狗小明，血气方刚。他有一个小爱好喜欢在a网站上学习“外语 ” ，既然是外语，那这个a网站的服务器应该在外国吧，网站a为了传播外语文化，在数据接口上采用了超时重传机制。假设最大请求次数是5次，每次最大请求延迟时间是5s 。小明某天夜里又开始学起了外语，但是网速不好啊。

他第一次打开a网站，延时6s,失败次数1 他不忍心放弃学习，继续等待，网站继续请求数据，延时又6s,失败次数2 他决定在等等，幸运的是此处接口3s后返回外语资料，他开心死了。

上面是一个超时重传的例子，如果数据请求次数在5次包含5的次数内请求成功，则请求成功。否则一直请求，当请求次数大于5时，返回失败。

代码设计

//timer--一次请求的最大响应时间 //limit--最大超时请求次数 //fn-----资源加载函数 function load (times,limit,fn) { return new Promise((resolve,reject)=>{ let num = 0//重传的次数 let statue = false//请求的状态 let timer = null//定时器 //一次请求的统计 function request() { let timers1 = Date.now() fn().then(res=>{ let timers2 = Date.now() if(timers2-timers1<times){ statue = true resolve(res) } }) } //一开始就异步加载数据 request() //定时器轮询模拟超时重传 timer = setInterval(()=>{ //请求成功了 if(statue) { clearInterval(timer) return } //请求次数超过限制，错误 if(num>=limit) { clearInterval(timer) reject("请求次数过多") return } //继续请求 console.log("重新请求中...") request() num++ },times) }) } //模拟资源请求 function fn() { return new Promise((resolve,reject)=>{ setTimeout(() => { resolve("ok") }, 3000); }) } //主函数调用 load(2000,5,fn) .then(msg=>{console.log(msg)}) .catch(err=>{ console.log(err) })

效果展示

核心讲解

首先我们对问题进行拆解

定义一个request,判断一次接口请求，根据开始和结束时间戳判断是否超时定义statue表示当前是否请求成功，定义count统计当前已经超时重传的次数开启全局定时器轮询的监听一次请求，定时器的回调就是判断当前请求是否成功，如果成功直接返回数据并关闭全局定时器，如果最大请求次数超过了限制，直接返回错误。否则继续轮询请求接口。

以上就是JS面试之异步模拟超时重传机制详解的详细内容，更多关于JS面试异步模拟超时重传的资料请关注本站其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。