ajax并发管控

网络一般可同时发送5~7个网络请求, 但我们一般并发请求数为4个, 需要留1个以上去请求js css 或 图片之类的数据, 避免页面白屏时间过长.

封装并发管控函数, 写入 ajaxContral.js 文件

/*
  + Ajax并发管控 [asyncPool]
 */
// async-pool的实现
// 实现的核心是通过Promise.all()和Promise.race()配合
export async function asyncPool (poolLimit, array, iteratorFn) {
  const ret = [] // 存储所有的异步任务
  const executing = [] // 存储所有正在执行的任务
  for (const item of array) {
    const p = Promise.resolve().then(() => iteratorFn(item, array))
    // 调用iteratorFn函数创建异步任务
    ret.push(p)
    // 保存新的异步任务
    if (poolLimit <= array.length) {
      // 当poolLimit小于等于总任务数量时，进行并发控制
      const e = p.then(() => executing.splice(executing.indexOf(e), 1))
      // 当任务完成后，从正在执行的任务队列中移除任务，腾出一个空位
      executing.push(e)
      // 加入正在执行的异步任务
      if (executing.length >= poolLimit) {
        await Promise.race(executing)
        // 有任务执行完成之后，进入下一次循环
      }
    }
  }
  return Promise.all(ret) // 所有任务完成之后返回
}