2024前端面试笔试真题

260 阅读2分钟

遇到了一些奇奇怪怪的笔试题,整理一下

限制最大请求数的并发请求

来自

长沙阿里外包

题目

假设有这么一个场景:现在有20个异步请求需要发送,但是由于HTTP客户端一般对同一个服务器的并发连接个数都是有限制的,比如chrome浏览器同一时刻最大并发数是6。

实现一个并发请求函数concurrencyRequest(urls, maxNum),要求如下:

  • 要求最大并发数 maxNum
  • 每当有一个请求返回,就留下一个空位,可以增加新的请求
  • 所有请求完成后,结果按照 urls 里面的顺序依次打出(发送请求的函数可以直接使用fetch即可)

考点

Promise、递归、fetch、队列

解答

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function concurrencyRequest(urls, maxNum) {
            return new Promise((resolve) => {
                const result = []

                function request(i) {

                    const url = urls[i]
                    if (!url) return


                    fetch(url).then(res => {
                        result[i] = res

                        if (result.length === urls.length) {
                            resolve(result)
                        } else {
                            request(i + maxNum)
                        }
                    })
                }


                for (let i = 0; i < maxNum && i < urls.length; i++) {
                    request(i)
                }
            })
        }

        const urls = [
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            'http://localhost:5500/',
            //... 添加更多的 URL
        ];
        const maxNum = 6;

        concurrencyRequest(urls, maxNum).then(res => {
            console.log(res);
        });
    </script>
</body>

</html>

思路

  • 先调用最大限制数maxNum的请求,这里maxNum=6,先request 6 次
  • 请求完成后把结果按索引塞入result结果中
  • 再调用加上maxNum的下一个请求,例如:本次请求调用的urls索引是1,那下一次请求的url索引是1+maxNum = 7
  • 对比result和urls的长度是否一致,表示全部请求完成,则resolve结束Promise函数,打印结果