【JS 多并发处理】一个可控并发数的小函数

日常开发中会经常遇见在一个模块尤其是可视化模块中多次调用多个api请求数据，而同一时间的大量api请求会造成服务器压力变大，稳定性变差，尤其是用户量很大的时候，这种影响会更突出。处理并发问题，后端一般会合并业务接口减少api调用，我们前端一般会配合进行优化，无非就是根据api优先级依次调用，减少同一时间的api调用。因此封装一个可控并发数的工具函数就比较重要了。

代码如下

//延迟函数
const p = (n)=> {
  return new Promise((res)=>{
    const t = (Math.random()*4000).toFixed(3)
    setTimeout(() => {
      console.log('/requestcallback.html [259]--1','t',t);
      res({t,n})
    },t);
  })
}

//使用fetch
//接口请求的函数
async function request(url) {
  //模拟各个接口响应时间，延迟执行api
  //真实场景中可以注释该代码，或者写死延迟时间，比如50ms
  await p(url)
  return fetch(url,{
    method:'GET'
  }).then( async(res)=> {
    
    const data = await res.json()
    return {
      data: data.data
    }
  })
}

/**
  * handleApiLimit 可控并发请求的函数
  * @params urls[] api
  * @params limit 并发数量 default 2
  * return [...data]
  */
async function handleApiLimit(urls,limit=2) {
  let result=[],start=0,end=limit,length=urls.length;
  if(limit>length) {
    end = length
  }
  while(start<length-1) {
    let apis = [...urls.slice(start,end)].map(api=>request(api))
    console.log('/requestcallback.html [323]--1','start,end',start,end);
    const res = await Promise.all(apis)
    console.log('/requestcallback.html [325]--1','res',res);
    start=end
    end+=limit
    result.push(...res)
  }
  return result
}

测试apis数量24，打印如下

//urls 因公司业务问题不提供了，自行补充
await handleApiLimit(urls,4)