字节面试官:如何实现Ajax并发请求控制

偷偷告诉你,点此抽奖送红包还送3本比红宝书还贵的书

实现一个批量请求函数 multiRequest(urls, maxNum),要求如下:
• 要求最大并发数 maxNum
• 每当有一个请求返回,就留下一个空位,可以增加新的请求
• 所有请求完成后,结果按照 urls 里面的顺序依次打出

这道字节跳动的题目我想很多同学应该都或多或少的见过,下面我会依次从出现的场景、问题的分析到最终的实现,一步步力求深入浅出的给出这道题目的完整解析。

场景

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

应该怎么做?

首先我们来了解一下 Ajax的串行和并行。

基于 Promise.all 实现 Ajax 的串行和并行

我们平时都是基于promise来封装异步请求的,这里也主要是针对异步请求来展开。

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

  • 并行:多个异步请求同时进行

通过定义一些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')
})

Promise.all 并发限制

这时候考虑一个场景:如果你的promises数组中每个对象都是http请求,而这样的对象有几十万个。

那么会出现的情况是,你在瞬间发出几十万个http请求,这样很有可能导致堆积了无数调用栈导致内存溢出。

这时候,我们就需要考虑对Promise.all做并发限制。

Promise.all并发限制指的是,每个时刻并发执行的promise数量是固定的,最终的执行结果还是保持与原来的Promise.all一致。

题目实现

思路分析

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

代码实现

function multiRequest(urls = [], maxNum) {// 请求总数量const len = urls.length;// 根据请求数量创建一个数组来保存请求的结果const result = new Array(len).fill(false);// 当前完成的数量let count = 0;return new Promise((resolve, reject) => {// 请求maxNum个while (count < maxNum) {next();}function next() {let current = count++;// 处理边界条件if (current >= len) {// 请求全部完成就将promise置为成功状态, 然后将result作为promise值返回!result.includes(false) && resolve(result);return;}const url = urls[current];console.log(`开始 ${current}`, new Date().toLocaleString());fetch(url).then((res) => {// 保存请求结果result[current] = res;console.log(`完成 ${current}`, new Date().toLocaleString());// 请求没有全部完成, 就递归if (current < len) {next();}}).catch((err) => {console.log(`结束 ${current}`, new Date().toLocaleString());result[current] = err;// 请求没有全部完成, 就递归if (current < len) {next();}});}});
}

推荐阅读

我在阿里招前端,我该怎么帮你?(现在还可以加模拟面试群)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?
若川知乎高赞:有哪些必看的 JS库?

末尾

你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

  1. 关注若川视野,回复"pdf" 领取优质前端书籍pdf,回复"1",可加群长期交流学习

  2. 我的博客地址:https://lxchuan12.gitee.io 欢迎收藏

  3. 觉得文章不错,可以点个在看呀^_^另外欢迎留言交流~

精选前端好文,伴你不断成长

若川原创文章精选!可点击

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读,也可以星标我的公众号,便于查找

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276283.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jquery 中 ajaxSubmit使用讲解

转载链接&#xff1a;http://blog.csdn.net/h70614959/article/details/8810270 1 引入依赖脚本 <script type"text/javascript" src"/js/jquery/jquery.form.js"></script> //ajaxForm 依赖脚本<script type"text/javascript"…

接口与抽象类

接口中的属性 默认是 public static final类型 就算你不加 默认也是存在 方法默认都是public abstract类型 不加默认也存在 比如 interface K { String abc"sdfd"; void add() throws Exception; } 实际上编译时 是这样 interface K { Public static final String a…

制造行业电子化签约及印控一体化解决方案

当生产“智造化”、营销“数字化”成为趋势&#xff0c;生产制造型企业如何实现产品生产-销售全流程提速降本&#xff1f;生产制造型企业为了在生产、营销环节降低成本、提升效率&#xff0c;经营模式上常有如下特征&#xff1a;• 原料导向&#xff0c;多点协同生产&#xff1…

python 点击按钮采集图片_python多线程采集图片

cmd中运行>python untitled2.py 图片的网站import requestsimport threadingfrom bs4 import BeautifulSoupimport sysimport osif len(sys.argv) ! 2:print("Usage : " )print(" python main.py [URL]" )exit(1)# config-starturl sys.argv[1]thre…

一起手写Vue3核心模块源码,掌握阅读源码的正确方法

最近和一个猎头聊天&#xff0c;说到现在前端供需脱节的境况。一方面用人方招不到想要的中高级前端&#xff0c;另一方面市场上有大量初级前端薪资要不上价。特别是用 Vue 框架的&#xff0c;因为好上手&#xff0c;所以很多人将 Vue 作为入门框架&#xff0c;但学得深的人并不…

jquery|javascript 回车事件

转载链接&#xff1a;http://www.cnblogs.com/wenbo/archive/2011/08/20/2147014.html 转载链接: http://www.2cto.com/kf/201202/119741.html jquery实现回车事件&#xff0c;代码如下&#xff1a; 全局&#xff1a; $(function(){ document.onkeydown function(e){…

【Vegas原创】ASP 0131 不允许父路径的解决

现象&#xff1a; Active Server Pages 错误 ASP 0131 不允许的父路径 /admin/login.asp&#xff0c;行 2 包含文件 ../include/config.asp 不能用 .. 表示父目录。 解决方案&#xff1a; IIS6>站点属性>主目录>配置>选项>启用父路径 转载于:https://www.cnblog…

腾讯正式宣布成立技术委员会,要对组织架构下狠手

2019 年伊始&#xff0c;社交巨人腾讯正式宣布成立技术委员会&#xff0c;计划在未来发力内部代码的开源和协同&#xff0c;投入更多资金和精力在技术建设上。BAT 三家里一直被诟病技术建设落后的腾讯&#xff0c;终于开始补足自己的短板。这会对腾讯自身带来什么&#xff1f;又…

2020 前端技术发展回顾

大家好&#xff0c;我是若川&#xff0c;今天给大家分享一篇来自阿里妈妈前端快爆的好文。另外&#xff0c;偷偷告诉你&#xff0c;截止今晚9点 点此抽奖送红包还送3本比红宝书还贵的书可以点击文章末尾阅读原文直达知乎链接&#xff0c;以下是正文2020 终究是一个不平凡的一年…

php验证码函数 使用imagestring() imagefttext()设置字体大小

转载路径&#xff1a;http://hi.baidu.com/asdasd_cn/item/62977d1e26ca36e85e53b142 生成验证码图片的两个函数 第一个是用imagestring bool imagestring ( resource $image , int $font , int $x , int $y , string $s , int $col ) imagestring() 用 col …

提取地图中道路_非机器学习方法·从遥感影像中提取道路

本科低年级曾经做过一个提取道路线的题目。提供的数据&#xff1a;老师给我们了一幅学校周边地区的影像&#xff0c;包括RGBInfrared四个波段。一开始使用的方法&#xff1a;当时尚青涩的我和小伙伴们一起使用KMEANS、阈值分割等等方法试图将那道路从影像中分离出来。遇到的问题…

图片尺寸自适应

图片尺寸自适应 οnlοad"javascript:if(this.height>this.width){this.height100}else{this.width100} 转载于:https://www.cnblogs.com/TangZhongxin/archive/2009/12/14/3942483.html

第一章知识点

第一章知识点 一&#xff1a;SQL语言 1&#xff0c;结构化查询语言&#xff0c;是关系数据库的标准语言 2&#xff0c;分类&#xff1a; 2.1&#xff1a;数据操作语言&#xff1a;DML&#xff1b;包括&#xff1a;即增删查改&#xff1b;insert&#xff0c;update&#xff0c;d…

2021年,推荐这几个优质公众号碎片化学习

2021 年了&#xff0c;前端技术日新月异&#xff0c;发展迅速&#xff0c;前端公众号是不是感觉越来越多了&#xff1f;在着辞旧迎新之际&#xff0c;这里盘点几个前端开发工程师 2021 年必须关注的优质公众号&#xff0c;希望对你有所帮助。大家可以像我一样&#xff0c;利用碎…

php 处理表单里面的 单双引号

转载链接&#xff1a;http://developer.51cto.com/art/200911/165392.htm 我们今天要向大家介绍的是PHP magic_quotes_gpc的具体使用方法。大家都知道在PHP中一个特殊的函数魔术函数&#xff0c;它在引用的过程中只有在传递$_GET,$_POST,$_COOKIE时才会发生作用。 PHP函数preg…

阿里云插件新版发布,多特性助力提升开发者体验

好消息&#xff01;阿里云 Cloud Toolkit 新版本于近日正式发布&#xff0c;推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件&#xff0c;多个重大特性&#xff0c;持续提升开发者体验&#xff0c;本文将带大家快速预览该新版本。 本文只挑选下面三个重大特性进行解读&…

海鸥表表带太长了怎么拆_表带安装,表带太长了,怎么拆解和安装?

表带太长了&#xff0c;怎么拆解和安装&#xff1f;1、准备拆表带前请看清楚表带背面的箭头。2、有箭头的带粒是可拆卸的。3、拧松拆带器把手&#xff0c;将表带放入表槽&#xff0c;并保持拆带器的钢针对准针孔&#xff0c;如图二&#xff0c;且拆带器的钢针顺着箭头的指示方向…

python类库31[文件和目录os+os.path+shutil]

一 常用函数 os模块 os.sep 表示默认的文件路径分隔符&#xff0c;windows为\, linux为/os.walk(spath): 用来遍历目录下的文件和子目录os.listdir(dirname)&#xff1a;列出dirname下的目录和文件os.mkdir() &#xff1a; 创建目录os.makedirs(): 创建目录&#xff0c;包含中间…

上一轮中奖信息公布

大家好&#xff0c;我是若川&#xff0c;抽奖活动其实挺耗时耗力的&#xff0c;尤其是留言和在看抽奖。比如我这篇文章写完就已经23:50了。特别想说的是&#xff1a;有126人点击了在看&#xff0c;但我的好友展示只有93人在看。说明还有30多人点击了在看&#xff0c;但忘记加我…

css判断不同分辨率显示不同宽度布局实现自适应宽度

转载链接&#xff1a;http://www.jb51.net/css/151312.html 点评&#xff1a;CSS判断不同分辨率浏览器&#xff08;显示屏幕&#xff09;显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 media样式进行判断&#xff0c;但IE9以下版本不支持CSS3技术&#xff0c;这里DIVCSS5给…