前端高并发请求该怎么做？手摸手做实践一步步循序渐进式实现，超详细教学，搞懂每种方案优劣，假设场景：需要发送100个请求，

相信大家或多或少都遇到过前端高并发的场景，需要发送大量的http请求，如果直接将所有的请求都放入浏览器queue中排队的话，势必会造成浏览器卡顿或者崩溃，这时候就需要一种机制来做控制。

转载请联系作者授权，并注明出处！

模拟实现

假设场景：需要发送100个请求，每个请求的时间不固定。

1、简单的前端请求

const fetchData = () => {
    fetch('http://127.0.0.1:3000').then(res => {
        return res
    })
}

for (let i = 0; i < 100; i++) {
    fetchData()
}

2、简单启动个服务

const http = require('http')

const server = http.createServer((req, res) => {
    // 简单cors
    res.writeHead(200, {
        'Content-Type': 'text/plain',
        'Access-Control-Allow-Origin': '*' 
    })
    // 0~1s 随机时间
    setTimeout(() => {
        res.end('Hello World!')
    }, Math.random() * 1000)
})

server.listen(3000, () => {
    console.log('Server is running on port 3000');
})

正常不做控制

发动机点火！！！

可以看到后面的请求 Stalled 时间比较长了，已经达到8秒，说明有大量的请求在queue中排队等待sent，会阻塞后续一些重要的请求，可能导致超时失败等问题。由于我们模拟请求数量不多且接口数据量小，所以浏览器并没有出现崩溃的情况，如果数量和数据量上去了，卡顿或崩溃的情况势必会发生！

串行控制

1、逐条发送

稍微改造一下前端代码

const fetchData = async () => {
    await fetch('http://127.0.0.1:3000').then(res => {
        return res
    })
}

const sent = async () => {
    for (let i = 0; i < 100; i++) {
        await fetchData()
    }
}

启动~~~

从图中可以看出请求是一条发送完成才会接着下一条发送，上面的时间看板显示请求是在一条线上的，因为用了keep-alive，复用同一条TCP链接，超长的 stalled 已经不存在了，但是这么请求的效率显然太慢了。

2、分组发送

将五个请求分为一组，一组接着一组串行发送。这个“五”是怎么怎么得出来的呢，chrome默认限制同时最多开启六条TCP链接，所以我将其分为五条一组，留一条处理别的请求。

改造一下请求代码

const sent = async () => {
    for (let i = 0; i < 100; i+= 5) {
        // 分组执行
        const exec = [
            fetchData(i),
            fetchData(i + 1),
            fetchData(i + 2),
            fetchData(i + 3),
            fetchData(i + 4)
        ]
        await Promise.all(exec)
    }
}

再次启动~~~

可以看出请求确实是按照五条一组的方式进行发送了，速度也比之前逐条发送快了不少，但是从时间看板上显示一组中有些请求快有些请求慢，需要等到最慢的请求完成了才会发送下一组。

如图中所示，如果每组中画红框这些时间也能利用起来，并发请求效率又将上升一个层级。

并发控制

我们能不能像控制一个执行队列一样，控制队列中执行数量也就是队列长度，每当有一条执行完成时出队，同时入队下一条，从而充分利用开启的每一条TCP链接。

我们将使用一个叫 p-limit 的库，源码行数不多，感兴趣的可以去看看，核心思路跟我们说的维护一个执行队列差不多。

安装

npm install p-limit

改造一下请求代码

import PLimit from 'p-limit'

// 限制五条并发
const pLimit = PLimit(5)

const execList = []

const sent = async () => {
    for (let i = 0; i < 100; i++) {
        execList.push(pLimit(fetchData))
    }
    await Promise.all(execList)
}

跑来起验证效果~~~~

至此达到我们最终想要的效果，一个可控的并发请求，即能控制并发数也不会出现超长的 stalled 阻塞后续请求。

总结

1、高并发请求不做限制时，会导致后续请求阻塞，甚至浏览器卡顿或崩溃

2、串行逐条发送，并发请求慢，整体耗时太长

3、串行五条一组发送，还可以进一步提升，更高效的利用TCP链接空闲时间

4、并发控制，目前较好的处理方式

如果大家有更好的方式的话可以分享出来！

开源自荐

去年趁着找工作那段时间做了个开源的低代码平台，初衷是打算只做低代码核心功能的实现，不会夹杂太多的业务功能，这样代码量少结构清晰，也方便新手学习。（笑死，记得当时为了推广，还去B站做了三次直播分享）

新入职快满一年，期间很少维护这个项目，因为从组件开发到H5预览发布这一些核心功能都已经打通，还买了服务器域名部署（服务器刚过期了，一年间预计有1W人次访问吧），再往下迭代的话就是反复堆一些业务功能。如果没有新的方向的话，没有继续迭代的意义。

最近发现一些比较有意思的技术方向，如果可行的话会往里加

1、组件远程加载（之前一直觉得我项目里的组件在线打包很牛，其实远程加载才是更优解）

2、解析设计稿生成页面应用，这个得好好说道说道了，低代码平台一般是通过组件物料等拼成应用，但是组件物料哪来啊，都需要一个个去开发，如果设计稿不光能解析成应用，还能把应用里的组件保存到平台，这样别的应用也能使用这个组件。由组件搭成应用，应用还能产组件，达到了一定的循环，想想就觉得有趣！

3、低代码搭建视频（看似灵活度不高视频内容受限，但专注于某个领域的话却是很有效的）

开源仓库地址: mobile-maker，github仓库地址

如果可以的话，请帮忙点个star