引言

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

題目分析

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

性感例子

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

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

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

代碼設(shè)計

//timer--一次請求的最大響應(yīng)時間
//limit--最大超時請求次數(shù)
//fn-----資源加載函數(shù)
function load (times,limit,fn) {
  return new Promise((resolve,reject)=>{
    let num = 0//重傳的次數(shù)
    let statue = false//請求的狀態(tài)
    let timer = null//定時器
    //一次請求的統(tǒng)計
    function request() {
      let timers1 = Date.now()
      fn().then(res=>{
        let timers2 = Date.now()
        if(timers2-timers1<times){
          statue = true
          resolve(res)
        }
      })
    }
    //一開始就異步加載數(shù)據(jù)
    request()
    //定時器輪詢模擬超時重傳
    timer = setInterval(()=>{
      //請求成功了
      if(statue) {
        clearInterval(timer)
        return 
      }
      //請求次數(shù)超過限制，錯誤
      if(num>=limit) {
        clearInterval(timer)
        reject("請求次數(shù)過多")
        return 
      }
      //繼續(xù)請求
      console.log("重新請求中...")
      request()
      num++
    },times)
  })
}
//模擬資源請求
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)
  })

效果展示

核心講解

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

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

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

最新評論