前端面试,假如有100个请求,如何去控制并发?

269 阅读2分钟

前端面试官:假如我一次性前端发几十上百个请求,如何去控制并发请求的?

云哥:利用Promise模拟任务队列,从而实现请求池效果。

众所周知,浏览器发起的请求最大并发数量一般都是6~8个,这是因为浏览器会限制同一域名下的并发请求数量,以避免对服务器造成过大的压力。

首先让我们来模拟大量请求的场景

1.png

2.png 一次性并发上百个请求,要是配置低一点,又或者带宽不够的服务器,直接宕机都有可能,所以我们前端这边是需要控制的并发数量去为服务器排忧解难。

什么是队列?

先进先出就是队列,push一个的同时就会有一个被shift。我们看下面的动图可能就会更加的理解:

3.png

定义请求池主函数函数

4.png 接受一个参数reqs,它是一个数组,包含需要发送的请求。函数的主要目的是对这些请求进行队列管理,确保并发请求的数量不会超过设定的上限。

定义dequeue函数

5.png 这个函数用于从请求池中取出请求并发送。它在一个循环中运行,直到当前并发请求数current达到最大并发数concurrency或请求池queue为空。对于每个出队的请求,它首先增加current的值,然后调用请求函数requestPromiseFactory来发送请求。当请求完成(无论成功还是失败)后,它会减少current的值并再次调用dequeue,以便处理下一个请求。

定义返回请求入队函数

6.png 函数返回一个函数,这个函数接受一个参数requestPromiseFactory,表示一个返回Promise的请求工厂函数。这个返回的函数将请求工厂函数加入请求池queue,并调用dequeue来尝试发送新的请求,当然也可以自定义axios,利用Promise.all统一处理返回后的结果。

实验

7.png

8.png 我们可以看到如上图所示,请求数确实被控制了,只有有请求响应成功的同时才会有新的请求进来,极大的降低里服务器的压力,后端的同学都只能喊6

整合代码

9.png

10.png

——海云前端,提供1对1前端简历面试辅导、前端私教课、前端项目难点笔记、语音咨询、模拟面试