JavaScript如何利用Promise控制并发请求个数


Posted in Javascript onMay 14, 2021

一、场景

假设现在有这么一种场景:现有 30 个异步请求需要发送,但由于某些原因,我们必须将同一时刻并发请求数量控制在 5 个以内,同时还要尽可能快速的拿到响应结果。

如图所示:

JavaScript如何利用Promise控制并发请求个数

上图这样的排队和并发请求的场景基本类似,窗口只有三个,人超过三个之后,后面的人只能排队了。

二、串行和并行

  • 串行:一个异步请求完了之后在进行下一个请求
  • 并行:多个异步请求同时进行

串行举例:

var p = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log("1000");
      resolve();
    }, 1000);
  });
};
var p1 = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log("2000");
      resolve();
    }, 2000);
  });
};
var p2 = function () {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log("3000");
      resolve();
    }, 3000);
  });
};

p()
  .then(() => {
    return p1();
  })
  .then(() => {
    return p2();
  })
  .then(() => {
    console.log("end");
  });

如示例,串行会从上到下依次执行对应接口请求。

并行举例:

通常,我们在需要保证代码在多个异步处理之后执行,会用到:

Promise.all((promises: [])).then((fun: function));

Promise.all可以保证,promises数组中所有promise对象都达到resolve状态,才执行then回调。

var promises = function () {
  return [1000, 2000, 3000].map((current) => {
    return new Promise(function (resolve, reject) {
      setTimeout(() => {
        console.log(current);
      }, current);
    });
  });
};

Promise.all(promises()).then(() => {
  console.log("end");
});

这时候考虑一个场景:

如果你的promises数组中每个对象都是http请求,而这样的对象有几十万个。
那么会出现的情况是,你在瞬间发出几十万个http请求,这样很有可能导致堆积了无数调用栈导致内存溢出。
这时候,我们就需要考虑对Promise.all做并发限制。
Promise.all并发限制指的是,每个时刻并发执行的promise数量是固定的,最终的执行结果还是保持与原来的Promise.all一致。

三、代码实现

整体采用递归调用来实现:最初发送的请求数量上限为允许的最大值,并且这些请求中的每一个都应该在完成时继续递归发送,通过传入的索引来确定了urls里面具体是那个URL,保证最后输出的顺序不会乱,而是依次输出。

代码:

function multiRequest(urls, maxNum) {
 const len = urls.length; // 请求总数量
 const res = new Array(len).fill(0); // 请求结果数组
 let sendCount = 0; // 已发送的请求数量
 let finishCount = 0; // 已完成的请求数量
 return new Promise((resolve, reject) => {
     // 首先发送 maxNum 个请求,注意:请求数可能小于 maxNum,所以也要满足条件2
     // 同步的 创建maxNum个next并行请求 然后才去执行异步的fetch 所以一上来就有5个next并行执行
     while (sendCount < maxNum && sendCount < len) { 
         next();
     }
     function next () {
         let current = sendCount ++; // 当前发送的请求数量,后加一 保存当前请求url的位置
         // 递归出口
         if (finishCount >= len) { 
         // 如果所有请求完成,则解决掉 Promise,终止递归
             resolve(res);
             return;
         }
         const url = urls[current];
         fetch(url).then(result => {
             finishCount ++;
             res[current] = result;
             if (current < len) { // 如果请求没有发送完,继续发送请求
                 next();
             }
         }, err => {
             finishCount ++;
             res[current] = err;
             if (current < len) { // 如果请求没有发送完,继续发送请求
                 next();
             }
         });
     }
 });
}

总结:

代码在while循环处创建了maxNum个"请求窗口"来进行请求,从而达到并行效果,然后next函数中进行异步请求,然后通过在.then里面进行递归进行新请求的调用,实现"一个窗口只进行一个请求,当这个请求执行完成后才进行下一个请求"(每个窗口串行执行,maxNum个窗口并行执行)。

到此这篇关于JavaScript如何利用Promise控制并发请求个数的文章就介绍到这了,更多相关js用Promise控制并发请求内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

参考链接

1、https://www.3water.com/article/211898.htm

2、https://www.3water.com/article/212277.htm

Javascript 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
Vue接口封装的完整步骤记录
Vue全家桶入门基础教程
js之ajax文件上传
May 13 #Javascript
react合成事件与原生事件的相关理解
vue实现可拖拽的dialog弹框
vue如何批量引入组件、注册和使用详解
JavaScript继承的三种方法实例
May 12 #Javascript
You might like
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
Pytorch释放显存占用方式
2020/01/13 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
python多线程和多进程关系详解
2020/12/14 Python
Python Selenium库的基本使用教程
2021/01/04 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
小学生读书感言
2014/02/12 职场文书
2014年新生军训方案
2014/05/01 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
初二学生评语大全
2014/12/26 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
Python PIL按比例裁剪图片
2022/05/11 Python