如何控制JavaScript中異步接口的并發(fā)數(shù)量

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

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')})

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') })