前端大批量并发请求的处理

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>测试大批量并发异步请求</title>

</head>

 

<body>

   <script>

       const limitFn = (limit) => {

           // 这两个变量相对于下面函数执行是闭包 局部全局变量

           // 存储promise异步的任务队列

           const queue = [];

           // 用于标记当前队列里Item个数

           let activeCount = 0;

 

           // 逐步释放队列任务

           const next = () => {

               activeCount--;

 

               if (queue.length > 0) {

                   queue.shift()();

               }

           };

           // 执行器

           const run = async (fn, resolve, reject, ...args) => {

               // 每次加入一个任务就+1 

               activeCount++;

               // 这里 fn(...args)返回一个Promise

               try {

                   const res = await fn(...args);

                   // 每一个任务都有独自的resolve将执行结果吐出去

                   resolve(res);

               } catch (err) {

                   // 这里将报错函数抛出去 以便再次执行

                   reject(fn)

               }

               // 每执行完一个任务 就从队列中再释放一个出来执行

               next();

           };

 

           const enqueue = (fn, resolve, reject, ...args) => {

               /* 

                run.bind  既能把实施参数传进函数内又不立即执行 并返回一个新的函数

                将新函数放进去任务队列 暂不执行

               */

               queue.push(run.bind(null, fn, resolve, reject, ...args));

 

               // 如果任务队列数量小于限制数量且任务队列有任务则 出队一个任务执行 

               // 如果进队列的速度大于某个任务执行过程 则会限流执行  但会加进任务队列中等待执行 相当于并发执行的数量始终控制在limit内

               if (activeCount < limit && queue.length > 0) {

                   queue.shift()();

               }

           };

           // 返回最终结果promise

           const generator = (fn, ...args) =>

               new Promise((resolve, reject) => {

                   enqueue(fn, resolve, reject, ...args);

               });

 

           return generator;

       };

 

       let runWay = limitFn(5);

 

 

       /* 模拟并发异步请求 100条 */

       let workNum = 100;

       // 异步函数list

       let asyncFnList = [];

       // 并发请求完的结果list

       let resultList = [];

       // 报错后的报错异步请求list

       let errorList = [];

 

       // 模拟请求

       let fakeFn = () => {

           return new Promise((resolve, reject) => {

               let time = Math.random() * 1000

               setTimeout(() => {

                   resolve(time)

               }, time);

 

           })

       }

 

       // 异步任务进队列

       for (let i = 0; i < workNum; i++) {

           asyncFnList.push(fakeFn)

       }

 

       const isFinished = () => (resultList.length + errorList.length) == workNum

 

       const doNotifi = () => {

           console.log('所有异步任务都执行完:' + JSON.stringify(resultList))

       }

       // 模拟并发100条请求

       asyncFnList.forEach(async fn => {

           try {

               let res = await runWay(fn);

               console.log('单个异步任务执行完:' + res)

               resultList.push(res);

               // 判断是否所有异步任务都执行完毕

               isFinished() && doNotifi()

           } catch (errorFn) {

               errorList.push(errorFn)

           }

       })

 

       // 如果有报错异步任务 则重新执行

       // TODO 这里可以对报错超过3次的异步任务进行剔除

       while (errorList.length > 0) {

           try {

               let res = runWay(errorList.shift());

               resultList.push(res);

               // 判断是否所有异步任务都执行完毕

               isFinished() && doNotifi()

           } catch (errorFn) {

               errorList.push(errorFn)

           }

 

       }

   </script>

</body>

 

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值