前端并发请求的实现

描述

多个请求需要在某一条件下触发，比如说有30个请求。

限制并发的数量，三个三个并发等等

多线程 => 两个任务跑在 => 两个线程 异步 => 微任务，宏任务滞后 => 同步任务执行完，执行微，宏任务

使用express模拟后端，制造9个接口，，前端这边定义9个函数，通过axios请求，将9个函数装入任务队列中， 定义一个并发请求类，传入最大并发数量，循环遍历任务队列，用实例化的并发类将其push进入类中的taskQueue.

并发类中，比较最大并发数和任务队列中的length,取出最小值，作为最小并发数，然后进行循环，取出数组中任务队列，依次执行，在finally再次执行请求，直到任务队列为空.

export default class ConcurrcyRequest {

  constructor ({maxConcurrency}) {
    this.maxConcurrency = maxConcurrency
    this.taskQueue = []
    this.response = {}
    setTimeout(() => {
      this._doRequest()
      
    }, );
    
   

  }

  push (task) {
    this.taskQueue.push(task)
  }


  // 做请求

  _doRequest () {
 
    if (!this.taskQueue.length) return 
    // 3  7
    const minConcurrencyCount = _getMinCount(this.maxConcurrency,this.taskQueue.length)

    for (let i = 0; i<minConcurrencyCount;i++) {
      const task = this.taskQueue.shift()
      
      this.maxConcurrency -- 
   
      this._runTask(task)
    }



}

_runTask (task) {
  task().then(res => {
      this.response[task.name] = {
        result:res,
        error:null
      }
  }).catch(err => {
    this.response[task.name] = {
      result:null,
      error:err
    }

  }).finally(() => {
    this.maxConcurrency ++
    this._doRequest()
    // console.log(this.response);
  })

}



}


function _getMinCount (count1,count2) {

  return Math.min(count1,count2)
  

}