全栈的自我修养 ———— js如何处理并发的大量请求？？

最新推荐文章于 2024-05-11 21:19:51 发布

鲜虾鱼板面428

最新推荐文章于 2024-05-11 21:19:51 发布

阅读量312

点赞数 7

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_82752568/article/details/136781052

版权

假如一个事件段内传过来一百多个请求，我们该处理大量并发请求呢

过程实现
验证
- 假如现在允许的并发量为4，有一百个请求！
- 假如现在允许的并发量为1，有一百个请求！
源码

过程实现

定义一个方法，这个方法会放入你在这个时间段接收到的请求，这里100位例！

        const urlArr = []
        function distributeUrl(params) {
            for(let i = 0;i< params;i++){
                urlArr.push(`http://localhost:8080/text`)
            }
        }
        distributeUrl(100)

声明一个处理请求的方法，接受一个事件段里面的请求数组
然后sum就是你允许的最大并发量

        function handleTask(urlArr,sum){
            return new Promise((resolve) => {
            // 如果这个时间段数组为零就返回
                if (urlArr.length === 0){
                    resolve()
                }
                const resArr = [];
                let index = 0;
                
                async function request(){
                // 在此期间为了提高效率，我们还可以分给多个服务器 
                // 如果完成了就返回
                    if (index >= urlArr.length){
                        return
                    }
                    const nowIndex = index
                    const url = urlArr[index]
                    index++
                    // 如下可以返回这个请求数组里面的每一个请求的请求结果
                 	// 然后汇聚到一个resArr上
                 	// 一次循环后继续进行下次循环
                    try {
                        const res = await fetch(url)
                        resArr[nowIndex] = res.status
                    } catch (error) {
                        console.log(error);
                        resArr[nowIndex] = '错误'
                    } finally {
                        console.log(resArr);
                        request()
                    }
                }
                for (let i = 0; i < sum; i++) {
                    request()
                }
            })
        }

验证

假如现在允许的并发量为4，有一百个请求！

在这里插入图片描述

假如现在允许的并发量为1，有一百个请求！

在这里插入图片描述

源码

<!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>
        const urlArr = []
        function distributeUrl(params) {
            for(let i = 0;i< params;i++){
                urlArr.push(`http://localhost:8080/text`)
            }
        }
        distributeUrl(100)
        
        function handleTask(urlArr,sum){
            return new Promise((resolve) => {
                if (urlArr.length === 0){
                    resolve()
                }
                const resArr = [];
                let index = 0;
                async function request(){
                    if (index >= urlArr.length){
                        return
                    }
                    const nowIndex = index
                    const url = urlArr[index]
                    index++
                    try {
                        const res = await fetch(url)
                        resArr[nowIndex] = res.status
                    } catch (error) {
                        console.log(error);
                        resArr[nowIndex] = '错误'
                    } finally {
                        console.log(resArr);
                        request()
                    }
                }
                for (let i = 0; i < sum; i++) {
                    request()
                }
            })
        }
        // 第一个参数传递地址数组，第二个参数最大并发数
        handleTask(urlArr,4)
    </script>
</body>
</html>