引言

前面我講解了兩篇有關(guān)異步的邏輯思維題目，一個(gè)是紅綠燈轉(zhuǎn)換，還有一個(gè)是異步并發(fā)限制。有小伙伴私信我說(shuō)不過(guò)癮，希望還能再出一篇異步超時(shí)重傳的講解。為了滿(mǎn)足這位粉絲的小小要求（我尼瑪），我查詢(xún)了相關(guān)資料和面試題，確實(shí)發(fā)現(xiàn)這是某大腸面試的代碼設(shè)計(jì)題。不得不說(shuō)這位粉絲發(fā)現(xiàn)的這個(gè)題目是相當(dāng)亮眼，相當(dāng)給力。

題目分析

超時(shí)重傳機(jī)制，看到這個(gè)詞語(yǔ)想必科班同學(xué)都十分十分熟悉吧。大家第一時(shí)間肯定會(huì)想到計(jì)算機(jī)網(wǎng)絡(luò)中tcp的超時(shí)重傳。不錯(cuò)，此處的異步模擬超時(shí)重傳機(jī)制和計(jì)算機(jī)網(wǎng)絡(luò)的超時(shí)重傳原理是幾乎一樣的。二者的唯一區(qū)別就在于一個(gè)作用在tcp的可靠傳輸上，而本節(jié)我們的超時(shí)重傳是作用在前端請(qǐng)求數(shù)據(jù)接口上。

性感例子

正直18歲的單身狗小明，血?dú)夥絼?。他有一個(gè)小愛(ài)好喜歡在a網(wǎng)站上學(xué)習(xí)“外語(yǔ)”，既然是外語(yǔ)，那這個(gè)a網(wǎng)站的服務(wù)器應(yīng)該在外國(guó)吧，網(wǎng)站a為了傳播外語(yǔ)文化，在數(shù)據(jù)接口上采用了超時(shí)重傳機(jī)制。假設(shè)最大請(qǐng)求次數(shù)是5次，每次最大請(qǐng)求延遲時(shí)間是5s。小明某天夜里又開(kāi)始學(xué)起了外語(yǔ)，但是網(wǎng)速不好啊。

• 他第一次打開(kāi)a網(wǎng)站，延時(shí)6s,失敗次數(shù)1
• 他不忍心放棄學(xué)習(xí)，繼續(xù)等待，網(wǎng)站繼續(xù)請(qǐng)求數(shù)據(jù)，延時(shí)又6s,失敗次數(shù)2
• 他決定在等等，幸運(yùn)的是此處接口3s后返回外語(yǔ)資料，他開(kāi)心死了。

上面是一個(gè)超時(shí)重傳的例子，如果數(shù)據(jù)請(qǐng)求次數(shù)在5次包含5的次數(shù)內(nèi)請(qǐng)求成功，則請(qǐng)求成功。否則一直請(qǐng)求，當(dāng)請(qǐng)求次數(shù)大于5時(shí)，返回失敗。

代碼設(shè)計(jì)

//timer--一次請(qǐng)求的最大響應(yīng)時(shí)間
//limit--最大超時(shí)請(qǐng)求次數(shù)
//fn-----資源加載函數(shù)
function load (times,limit,fn) {
  return new Promise((resolve,reject)=>{
    let num = 0//重傳的次數(shù)
    let statue = false//請(qǐng)求的狀態(tài)
    let timer = null//定時(shí)器
    //一次請(qǐng)求的統(tǒng)計(jì)
    function request() {
      let timers1 = Date.now()
      fn().then(res=>{
        let timers2 = Date.now()
        if(timers2-timers1<times){
          statue = true
          resolve(res)
        }
      })
    }
    //一開(kāi)始就異步加載數(shù)據(jù)
    request()
    //定時(shí)器輪詢(xún)模擬超時(shí)重傳
    timer = setInterval(()=>{
      //請(qǐng)求成功了
      if(statue) {
        clearInterval(timer)
        return 
      }
      //請(qǐng)求次數(shù)超過(guò)限制，錯(cuò)誤
      if(num>=limit) {
        clearInterval(timer)
        reject("請(qǐng)求次數(shù)過(guò)多")
        return 
      }
      //繼續(xù)請(qǐng)求
      console.log("重新請(qǐng)求中...")
      request()
      num++
    },times)
  })
}
//模擬資源請(qǐng)求
function fn() {
  return new Promise((resolve,reject)=>{
    setTimeout(() => {
      resolve("ok")
    }, 3000);
  })
}
//主函數(shù)調(diào)用
load(2000,5,fn)
  .then(msg=>{console.log(msg)})
  .catch(err=>{
    console.log(err)
  })

效果展示

核心講解

首先我們對(duì)問(wèn)題進(jìn)行拆解

• 定義一個(gè)request,判斷一次接口請(qǐng)求，根據(jù)開(kāi)始和結(jié)束時(shí)間戳判斷是否超時(shí)
• 定義statue表示當(dāng)前是否請(qǐng)求成功，定義count統(tǒng)計(jì)當(dāng)前已經(jīng)超時(shí)重傳的次數(shù)
• 開(kāi)啟全局定時(shí)器輪詢(xún)的監(jiān)聽(tīng)一次請(qǐng)求，定時(shí)器的回調(diào)就是判斷當(dāng)前請(qǐng)求是否成功，如果成功直接返回?cái)?shù)據(jù)并關(guān)閉全局定時(shí)器，如果最大請(qǐng)求次數(shù)超過(guò)了限制，直接返回錯(cuò)誤。否則繼續(xù)輪詢(xún)請(qǐng)求接口。

以上就是JS面試之異步模擬超時(shí)重傳機(jī)制詳解的詳細(xì)內(nèi)容，更多關(guān)于JS面試異步模擬超時(shí)重傳的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論