JS面试之异步模拟超时重传机制详解

超时重传机制，看到这个词语想必科班同学都十分十分熟悉吧。大家第一时间肯定会想到计算机网络中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统计当前已经超时重传的次数
• 开启全局定时器轮询的监听一次请求，定时器的回调就是判断当前请求是否成功，如果成功直接返回数据并关闭全局定时器，如果最大请求次数超过了限制，直接返回错误。否则继续轮询请求接口。