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统计当前已经超时重传的次数
  • 开启全局定时器轮询的监听一次请求，定时器的回调就是判断当前请求是否成功，如果成功直接返回数据并关闭全局定时器，如果最大请求次数超过了限制，直接返回错误。否则继续轮询请求接口。

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

赞 (0)

相关推荐

  • JavaScript前端超时异步操作完美解决过程

    目录 如果一段代码久久不能执行完成,会怎么样? Axios 自带超时处理 处理 fetch() 超时 万物皆可超时 自从 ECMAScript 的 Promise ES2015 和 async/await ES2017 特性发布以后,异步在前端界已经成为特别常见的操作.异步代码和同步代码在处理问题顺序上会存在一些差别,编写异步代码需要拥有跟编写同步代码不同的"意识". 如果一段代码久久不能执行完成,会怎么样? 如果这是同步代码,我们会看到一种叫做"无响应"的现象,或

  • Nodejs回调加超时限制两种实现方法

    Nodejs回调加超时限制两种实现方法 Nodejs下的IO操作都是异步的,有时候异步请求返回太慢,不想无限等待回调怎么办呢?我们可以给回调函数加一个超时限制,到一定时间还没有回调就表示失败,继续后面的步骤. 方案1:用async的parallel实现 在这里我用到了async的parallel方法,parallel可以让若干个异步回调的方法并行执行,正常情况下,所有回调函数都完成后会汇集到parallel最终的回调函数里,但是有一种例外,如果其中一个步骤有错误抛出并直接调用parallel最终

  • 浅谈JavaScript超时调用和间歇调用

    间歇调用 在JavaScript中间歇调用很常见,setInterval,就是间隔一定的时间重复调用. setInterval()方法接收两个参数:第一个参数可以是字符串,也可以是函数,第二个参数是一个以毫秒为单位的数字,表示重复间隔的时长. 参数是字符串 当第一个传递参数是字符串时,如下: setInterval("alert('this is a string.')",1000); 这里的字符串是一段JavaScript代码,和传入的eval()函数的参数一样,如果是有内外两个引号

  • js超时调用setTimeout和间歇调用setInterval实例分析

    本文实例分析了js超时调用setTimeout和间歇调用setInterval的用法.分享给大家供大家参考.具体如下: 今天看了javascript高级程序设计(第三版)一书,发现说setTimeout比setInterval更好,觉得的确如此.平时都是用setInterval多点,现在还是转一下思路了.又学习到了.分析如下: setTimeout包含两个参数,第一个参数是要执行的代码,第二个参数是时间. 第一个参数可以是字符串也可以是函数,但是推荐使用函数而不是字符串. 使用字符串相当于eva

  • js中setTimeout的妙用--防止循环超时

    js中setTimeout的妙用--防止循环超时

    上个周日,介绍了如何使用setTimeout代替setInterval进行间歇调用,这个周日,继续来讲<JavaScript高级程序设计>这本书里面,对于setTimeout的另一种妙用--防止循环超时  [这是铺垫,为故事的高潮埋下伏笔] JS是单线程的,一个代码块里面的代码,只能按顺序从上到下执行,所以如果中间有一块代码,执行起来非常耗时,就会导致下面的代码无法执行,出现浏览器假死的状态. JS的耗时操作,常见的有两种  1.向服务器发起请求   2.对数组的循环操作  (当然,还有一种,

  • JSP Session超时设置的实现方法

    JSP Session超时设置的实现方法 在Java Web开发中,Session为我们提供了很多方便,Session是由浏览器和服务器之间维护的.Session超时理解为:浏览器和服务器之间创建了一个Session,由于客户端长时间(休眠时间)没有与服务器交互,服务器将此Session销毁,客户端再一次与服务器交互时之前的Session就不存在了. 设置Session超时时间方式: 方式一:  在web.xml中设置session-config如下: <session-config> <

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

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

    目录 引言 题目分析 代码设计 核心讲解 引言 前面我讲解了两篇有关异步的逻辑思维题目,一个是红绿灯转换,还有一个是异步并发限制.有小伙伴私信我说不过瘾,希望还能再出一篇异步超时重传的讲解.为了满足这位粉丝的小小要求(我尼玛),我查询了相关资料和面试题,确实发现这是某大肠面试的代码设计题.不得不说这位粉丝发现的这个题目是相当亮眼,相当给力. 题目分析 超时重传机制,看到这个词语想必科班同学都十分十分熟悉吧.大家第一时间肯定会想到计算机网络中tcp的超时重传.不错,此处的异步模拟超时重传机制和计算

  • python模拟事件触发机制详解

    本文实例为大家分享了python模拟事件触发机制的具体代码,供大家参考,具体内容如下 EventManager.py # -*- encoding: UTF-8 -*- # 系统模块 from queue import Queue, Empty from threading import * class EventManager: def __init__(self): """初始化事件管理器""" # 事件对象列表 self.__eventQu

  • Vue nextTick延迟回调获取更新后DOM机制详解

    Vue nextTick延迟回调获取更新后DOM机制详解

    目录 简述 事件循环机制 vue数据驱动视图的处理(异步变化DOM) Vue.nextTick原理 Vue.nextTick的应用 created生命周期中操作DOM 修改数据,获取DOM值 简述 相信大家在写vue项目的时候,一定会发现一个神奇的api,Vue.nextTick.为什么说它神奇呢,那是因为在你做某些操作不生效时,将操作写在Vue.nextTick内,就神奇的生效了.那这是什么原因呢? 让我们一起来研究一下. vue 实现响应式并不是数据发生变化后 DOM 立即变化,而是按照一定

  • linux epoll机制详解

    linux epoll机制详解

    在linux 没有实现epoll事件驱动机制之前,我们一般选择用select或者poll等IO多路复用的方法来实现并发服务程序.在linux新的内核中,有了一种替换它的机制,就是epoll. select()和poll() IO多路复用模型 select的缺点: 1.单个进程能够监视的文件描述符的数量存在最大限制,通常是1024,当然可以更改数量,但由于select采用轮询的方式扫描文件描述符,文件描述符数量越多,性能越差:(在linux内核头文件中,有这样的定义:#define __FD_SE

  • java调用回调机制详解

    调用和回调机制 在一个应用系统中, 无论使用何种语言开发, 必然存在模块之间的调用, 调用的方式分为几种: 1.同步调用 同步调用是最基本并且最简单的一种调用方式, 类A的方法a()调用类B的方法b(), 一直等待b()方法执行完毕, a()方法继续往下走. 这种调用方式适用于方法b()执行时间不长的情况, 因为b()方法执行时间一长或者直接阻塞的话, a()方法的余下代码是无法执行下去的, 这样会造成整个流程的阻塞. 2.异步调用 异步调用是为了解决同步调用可能出现阻塞, 导致整个流程卡住而产

  • JavaScript 运行机制详解再浅谈Event Loop

    JavaScript 运行机制详解再浅谈Event Loop

    目录 一.为什么JavaScript是单线程? 二.任务队列 三.事件和回调函数 四.Event Loop 五.定时器 六.Node.js的Event Loop 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线

  • Android Handler机制详解原理

    Looper是整个跨线程通信的管理者 // 内部持有的变量如下: ThreadLocal<Looper> MainLooper Observer MessageQueue Thread 1.首先先回忆一下Handler怎么用 Android线程通信分为以下两种情况 1.子线程发消息给UI线程 2.UI线程发消息给子线程 3.子线程发消息给另个子线程 1.子线程发消息给UI线程 class FragmentContentActivity : AppCompatActivity() { val F

  • C#异步编程async/await用法详解

    C#异步编程async/await用法详解

    异步函数简介 一般指 async 修饰符声明得.可包含await表达式得方法或匿名函数. 声明方式 异步方法的声明语法与其他方法完全一样, 只是需要包含 async 关键字.async可以出现在返回值之前的任何位置, 如下示例: async public static void GetInfoAsync() { //... } public async static void GetInfoAsync() { //... } public static async void GetInfoAsy

  • java异步编程CompletableFuture使用示例详解

    目录 一.简单介绍 二.常见操作 1.使用默认线程池 2.使用自定义线程池 3.获取线程的执行结果 三.处理异步结算的结果 四.异常处理 五.组合 CompletableFuture 六.并行运行多个 CompletableFuture 七.案例 1.从多个平台获取书价格 2.从任意一个平台获取结果就返回 一.简单介绍 CompletableFuture 同时实现了 Future 和 CompletionStage 接口. public class CompletableFuture<T> i

  • 微信小程序中使用Promise进行异步流程处理的实例详解

    微信小程序中使用Promise进行异步流程处理的实例详解 我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理.比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间(比如一个很大的循环操作),则页面会产生卡死的现象. 所以,在JavaScript中,提供了一些异步特性,为程序提供了性能和体验上的益处,比如可以将代码放到setTimeout()中执行:或者在网页中,我们使用Ajax的方式向服务器端做异步数据请求.这些异步的代码不会阻塞当前的界面主进程,界面还是可以

随机推荐