快捷導(dǎo)航

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

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

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

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

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

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

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

簡(jiǎn)易實(shí)現(xiàn)

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

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

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

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

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

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

上面的簡(jiǎn)易實(shí)現(xiàn)是一個(gè)隊(duì)列一個(gè)隊(duì)列進(jìn)行請(qǐng)求，實(shí)際運(yùn)行效果會(huì)存在一定的阻塞，下面通過(guò)進(jìn)一步改善來(lái)提高請(qǐng)求的效率

完善實(shí)現(xiàn)

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

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

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

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

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

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

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

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

  let p = Promise.resolve()

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

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

 // arr循環(huán)完后， 現(xiàn)在fetchArr里面剩下的promise對(duì)象， 使用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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: