前端假如有几十个请求,如何去控制并发【热度: 590】

关键词:并发请求处理

  1. 使用Promise.allSettled和分批处理:将请求按并发限制分成小批次,用Promise.allSettled逐批执行,如fetchWithConcurrency函数,通过循环取批次并处理,最后返回所有结果。
  2. 使用队列方式控制并发PromiseQueue类通过限制同时运行的Promise数量管理并发,有enqueue方法添加任务,runNext方法按规则执行任务,使用时创建实例并传入并发数,将请求任务入队后用Promise.all执行。
  3. 使用第三方库
    • p - limit:引入后设置最大并发数,将请求任务用其包裹后用Promise.all执行。
    • promise - pool:引入后配置请求数组、并发数和任务函数,执行promisePool获取结果。
  4. 浏览器专用:AbortController限制超时fetchWithTimeout函数利用AbortController结合超时机制,在超时后中止请求,处理请求时传入signal,捕获错误并在最后清除超时。
  5. 选择建议
    • 任务数量多但单任务时间短,适合分批处理或PromiseQueue
    • 任务数量多且复杂,建议用p - limit等库。
    • 实时性要求高,可考虑AbortController或合理设置超时策略。