码上掘金模拟超时重传机制

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

介绍

超时重传机制的需求在前端工作和接口处理上是十分常见的，我们在许多的开发和工作中都可以看到实际的例子，接下来，我将设计一个超时重传的实例例子，如果大家有任何疑问和难题都可以评论区留言，我会第一时间解决和处理的。谢谢各位观众老爷的支持。

码上掘金地址

核心功能讲解

/**
 * 模拟发送请求，
 * 1.在指定时间内失败重新请求
 * 2.当大于指定重传次数后，失败
 */
//timer--请求的最大时间
//limit--最大超时请求次数
//fn-----请求资源的异步过程
function load (times,limit,fn) {
  return new Promise((resolve,reject)=>{
    let num = 0//重传的次数
    let statue = false//请求的状态
    let timer = null//定时器

    //一次请求的过程
    function request() {
      fn().then(res=>{
        if(res) {
          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(() => {
      reject("error")
    }, 1000);
  })
}

load(2000,5,fn)

1. 首先清楚函数设计中参数的含义，第一个参数times表示的是一次最大请求时间。limit表示的是最大重传次数。fn代表的是接口请求的作用。
2. 由于是数据接口的模拟请求，因此我们直接使用promise完成功能的设计。
3. 定义timer控制定时器的开始和关闭。
4. 定义一个statue保存是否请求成功
5. 定义一个num保存已经请求的次数
6. 接着，我们内部定义一个函数，用于执行fn的接口请求。如果成功，修改状态
7. 在下面直接调用这个函数，然后开启定时器轮询，执行这个含函数，根据状态和执行次数进行结果的判断

总结

通过对超时重传机制实际说明和举例子，大家对其内部的设计和原理肯定有了一定的认识，大家可以根据我的分步骤讲解具体的设计一个超时重传机制例子，谢谢各位的观看，有疑问评论区见。