快捷導航

js異步接口并發(fā)數(shù)量控制的方法示例

更新時間：2020年11月22日 15:37:10 作者：定栓

這篇文章主要給大家介紹了關(guān)于js異步接口并發(fā)數(shù)量控制的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

請實現(xiàn)如下的函數(shù)（發(fā)請求的函數(shù)可以直接使用fetch）

可以批量請求數(shù)據(jù)，所有的URL地址在urls參數(shù)中
同時可以通過max參數(shù) 控制請求的并發(fā)度
當所有的請求結(jié)束后，需要執(zhí)行callback回調(diào)

function sendRequest (urls: string[], max: number, callback: () => void) {}

fetch 函數(shù)返回的是一個promise，promise對象在實例化的時候就已經(jīng)開始執(zhí)行了。

簡易實現(xiàn)

function fetch(url) {
 // 模擬接口請求
 return new Promise(resolve => {
   setTimeout(() => {
     resolve(url)
   }, 10000*Math.random())
 })
}

/**
 * 接口請求最大并發(fā)量控制
 * @param { Array } urls 接口請求地址數(shù)組集合
 * @param { Number } max 最大并發(fā)量
 * @param { Function } callback 回調(diào)函數(shù) 
 */
function maxRequestLimit(urls, max, callback) {
 // 如果沒有傳入urls或max則不繼續(xù)執(zhí)行
 if (!urls || !max) return

 // 當請求地址數(shù)組集合長度為0，則執(zhí)行回調(diào)函數(shù)（如果有的話），并結(jié)束后續(xù)執(zhí)行
 if(urls.length === 0) {
   if(callback) callback()
   return
 }
 
 // 使用splice方法返回當前要使用的請求集合，同時刪除原有的請求集合
 const onceMaxUrlArr = urls.splice(0, max)

 // 進行map轉(zhuǎn)換，將url參數(shù)轉(zhuǎn)換為promise
 const onceMaxFetchArr = onceMaxUrlArr.map(url => fetch(url))

 // 使用當前這一隊列
 Promise.all(onceMaxFetchArr)
 .then(res => {
  console.log(res)
  // 遞歸請求
  maxRequestLimit(urls, max, callback)
 })
}

maxRequestLimit(['url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7', 'url8'], 3, () => {console.log('fetch end')})

上面的簡易實現(xiàn)是一個隊列一個隊列進行請求，實際運行效果會存在一定的阻塞，下面通過進一步改善來提高請求的效率

完善實現(xiàn)

function fetch(url) {
 // 模擬接口請求
 return new Promise(resolve => {
  setTimeout(() => {
   resolve(url)
  }, 10000 * Math.random())
 })
}

/**
 * 接口請求最大并發(fā)量控制
 * @param { Array } urls 接口請求地址數(shù)組集合
 * @param { Number } max 最大并發(fā)量
 * @param { Function } callback 回調(diào)函數(shù) 
 */
function maxRequestLimit(arr, max, callback) {
 // 如果沒有傳入urls或max則不繼續(xù)執(zhí)行
 if (!arr || !max) return

 // 當請求地址數(shù)組集合長度為0，則執(zhí)行回調(diào)函數(shù)（如果有的話），并結(jié)束后續(xù)執(zhí)行
 if(arr.length === 0) {
   if(callback) callback()
   return
 }

 let fetchArr = [], // 存儲并發(fā)max的promise數(shù)組
  i = 0;

 function toFetch() {
  // 所有的請求都受理，則返回一個resolve
  if (i === arr.length) return Promise.resolve()

  // 取出第i個url， 放入fetch里面 , 每取一次i++
  let one = fetch(arr[i++]) 

  //將當前的promise存入并發(fā)數(shù)組中
  fetchArr.push(one) 

  // 當promise執(zhí)行完畢后，從數(shù)組刪除
  one.then(res => { 
   console.log(res)
   fetchArr.splice(fetchArr.indexOf(one), 1) 
  }) 

  let p = Promise.resolve()

  // 當并行數(shù)量達到最大后， 用race比較 第一個完成的， 然后再調(diào)用一下函數(shù)自身。
  if (fetchArr.length >= max) p = Promise.race(fetchArr)

  return p.then(() => toFetch())
 }

 // arr循環(huán)完后， 現(xiàn)在fetchArr里面剩下的promise對象， 使用all等待所有的都完成之后執(zhí)行callback
 toFetch()
 .then(() => Promise.all(fetchArr))
 .then(() => callback())
}


maxRequestLimit(['url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7', 'url8'], 3, () => { console.log('fetch end') })

總結(jié)

到此這篇關(guān)于js異步接口并發(fā)數(shù)量控制的文章就介紹到這了,更多相關(guān)js異步接口并發(fā)數(shù)量控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: