如何基于JS实现Ajax并发请求的控制详解

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

前言

最近看到一个面试题，当然了，就是这篇文章的标题,Ajax的并发请求的控制，感觉挺有意思的，在社区看了下，应该是字节的面试题，也挺多大佬对这个进行了总结，都看了下，于是自己也想试着总结下，代码文末会全部贴出，如有不足，请指出！

Ajax的串行与并行

串行：一般业务需求是下个接口需要用到上个接口的返回的数据，前端常用的请求库是Axios,本身就是基于Promise的HTTP库，我们直接采用链式调用，或者采用Async Await 的方式就可以实现，就不做演示了
并行:就是多个请求同时发生，一般情况会用于当所有数据都拿到后进行渲染页面，或者其他的操作，主要还是基于Promise.all实现方式如下

上面模拟实现了基于Promise.all的并行操作，打印结果入下

是不是觉得的这就结束了，不存在的？接下来才是正菜，我们试想有种情况，一个页面中需要同时发送上万个请求，全部成功后再去做一些操作，这样会导致什么后果呢？代码无法执行，内存溢出，哎~这个时候就回到了我们文章的主题上了，如何对Ajax并发请求的控制呢？我让他一次性只能输出一定数量的请求，直到所有的都成功为止，接下来我将用两种方法实现这个操作，望读者朋友们不吝赐教

Ajax的并发请求控制的两大解决方案

基于Promise递归实现

以下的两种方法都是需要用到上图中的那个Tasks数组的，请大家记住它,第一中基于Promise的方法，大致思路是：当你传入一个并发量pool时，会创建pool个工作区，每一个工作区回去拿对应的任务(请求)去执行，成功后保存，然后继续去拿任务（请求），直到工作区没有任务了，当然了，失败直接终止，大致思路就是这样，下面我对每一行代码进行了注释，请笑纳

基于Class实现

第二种方法是基于Class来实现的，和上面的区别在于这个只创造一个工作区，大致思路：创建一个工作区用于执行任务(请求)，然后将所有任务都推入，但是没次只能执行对应的并发数，当小于并发数市，继续去拿任务执行它，直到没有任务(请求)为止，就是这样，下面是具体实现

代码展示

这里把这两种方法的实现代码贴出

    const delay = function delay(interval) {
      return new Promise((res,rej) => {
        setTimeout(() => {
          res(interval)
        }, interval);
      })
    }


    let tasks = [() => {
      return delay(1000)
    },() => {
      return delay(1003)
    },() => {
      return delay(1005)
    },() => {
      return delay(1002)
    },() => {
      return delay(1004)
    },() => {
      return delay(1006)
    }]

    // 通过Promise.all实现并行
    Promise.all(tasks.map(task => task())).then(res => {
      console.log(res);
    })

    // 基于Promise实现

    function creatRequest(tasks,pool) {
      // 每次控制的发送请求的数量pool
      pool = pool || 5
      // 用于存储每一次请求的结果(按顺序进行存贮)
      let results = [],
      // together 用于创建工作区，当pool传入的是几，我们就对应的创建几个工作区
      // 也就是创建一个长度为pool且值为null的一个数组
          together = new Array(pool).fill(null),
      // index为每次获取的任务值
          index = 0;
      together = together.map(() => {
        // 基于Promise进行管理
        return new Promise((resolve,reject) => {
          // 创建一个函数，进来立刻执行
          const run = function run() {
            // 如果任务池已经空了，说明请求发送完成了，直接成功
            if(index >= tasks.length) {
              resolve()
              return 
            }
            // 先将index保存一下用于存储当前成功请求的结果
            let old_index = index,
            // 获取当前发送的请求，然后把index进行累加，所以上面会把index保存起来
            // 这里index++ 是先运算后累加的，而++index则相反，先累加后运算
                task = tasks[index++];
            // 执行请求
            task().then(result => {
            // 将成功结果保存
              results[old_index] = result
            // 递归继续执行，也就是继续拿到任务到工作区执行
              run();
            }).catch(reason => {
              reject(reason)
            })
          }
          // 立即执行
          run()
        })
      })
      // 用Promise.all管控工作区，也就是每次并发两个请求
      return Promise.all(together).then(() => results)
    }


    creatRequest(tasks,2).then(results => {
      // 都成功，整体才成功，按顺序存储结果
      console.log('成功',results);
    }).catch(resolve => {
      // 只要有一个失败，整体失败
      console.log('失败');
    })



    // 基于Class实现
    function creatRequest(tasks,pool,callback) {
      // 参数的限制与验证
      if(typeof pool === 'function') {
        callback = pool;
        pool = 5
      }
      if(typeof pool !== 'number') pool = 5
      if(typeof callback !== 'function') callback = function () {}
      // -------
      class TaskQueue {
        // 正在运行的个数
        runing = 0;
        // 将所有任务所存在的队列
        queue = [];
        // 存储执行任务(请求)的结果
        results = [];
        pushTask(task) {
          let self = this
          // 将任务推入工作区
          self.queue.push(task)
          // 执行发送请求的逻辑
          self.next()
        }
        next() {
          let self = this
          // 当正在执行的任务数小于并发量的时候继续去拿任务执行
          while(self.runing < pool && self.queue.length) {
            self.runing++;
            // 相当于拿一个任务删除一个任务
            let task = self.queue.shift();
            // 执行请求
            task().then(result => {
              // 将执行结果保存
              self.results.push(result)
            }).finally(() => {
              // 将正在运行的个数清除
              self.runing--
              // 继续执行请求
              self.next()
            })
          }
          // 当没有任务了循环结束
          if(self.runing === 0) callback(self.results)
        }


      }
      // 实例化
      let TQ = new TaskQueue()
      tasks.forEach(task => TQ.pushTask(task))
    }


    creatRequest(tasks,2,results=> {
      console.log(results);
    })