--- theme: smartblue --- 前端异步请求并发控制是指在客户端（通常是在浏览器中）管理和控制同时发出的异步请求的数量的技术。在进行网络请求，如使用 AJAX 与服务器交互时，可能会有多个请求同时发送。如果不加以控制，大量并发的请求可能会导致服务器压力过大，或者在客户端造成性能问题。
为了实现并发控制，你可以使用多种策略，其中一些策略包括： 1. **队列**: 创建一个请求队列，并且同时只处理一定数量的请求。一旦当前处理的请求完成，就从队列中取出下一个请求进行处理。 2. **批处理**: 将多个请求合并成一个批量请求，如果 API 支持的话。这减少了请求数量，但可能需要服务器端的支持。 3. **节流**: 在特定时间内限制请求的数量。例如，每秒只允许发出一个请求。 4. **防抖**: 如果有大量连续的请求，在一定的延迟后只执行最后一次请求，这通常用于搜索框等场景。 5. **Promise 控制**: 使用 Promise.all 来管理多个请求，或者使用 Promise.race 来处理多个请求中最快返回的结果。我们先来手动实现一个并发请求控制，你可以创建一个管理请求的队列，并通过设置一个最大并发数来控制同时进行的请求数量。
当一个请求完成时，你可以从队列中取出下一个请求并执行它。以下是一个简单的 JavaScript 例子，它展示了如何使用 Promise 来管理并发请求。
假设我们有一个 sendRequest 函数，这个函数接收一个 url，并返回一个 Promise。我们的目标是控制这些请求的并发数。 ```typescript class RequestQueue { constructor(maxConcurrent) { this.maxConcurrent = maxConcurrent; // 设置最大并发数 this.currentRunning = 0; // 当前正在运行的请求数 this.queue = []; // 等待执行的请求队列 } // 将请求封装成一个函数，推入队列，并尝试执行 enqueue(url) { return new Promise((resolve, reject) => { const task = () => { // 当请求开始时，currentRunning 加 1 this.currentRunning++; sendRequest(url).then(resolve).catch(reject).finally(() => { // 请求结束后，currentRunning 减 1，并尝试执行下一个请求 this.currentRunning--; this.dequeue(); }); }; this.queue.push(task); this.dequeue(); // 每次添加请求后尝试执行请求 }); } dequeue() { // 如果当前运行的请求小于最大并发数，并且队列中有待执行的请求 if (this.currentRunning < this.maxConcurrent && this.queue.length) { // 从队列中取出一个请求并执行 const task = this.queue.shift(); task(); } } } // 这个函数是模拟发送请求的，实际中你可能需要替换成真实的请求操作 function sendRequest(url) { console.log(`Sending request to ${url}`); return new Promise((resolve) => { setTimeout(() => { console.log(`Response received from ${url}`); resolve(`Result from ${url}`); }, Math.random() * 2000); // 随机延时以模拟请求处理时间 }); } // 使用 RequestQueue const requestQueue = new RequestQueue(3); // 假设我们限制最大并发数为3 // 模拟批量请求 const urls = ['url1', 'url2', 'url3', 'url4', 'url5', 'url6']; urls.forEach(url => { requestQueue.enqueue(url).then(result => { console.log(result); }); }); ``` 在这个例子中，我们创建了一个 RequestQueue 类来管理请求。这个队列有三个关键的部分： 1. enqueue 方法：添加请求到队列中，并尝试调用 dequeue 来执行请求。 2. dequeue 方法：检查当前执行的请求数量是否小于最大并发数，如果是，就从队列中取出请求并执行。 3. sendRequest 函数：这是一个模拟请求的函数，实际使用时需要替换为真实的 HTTP 请求操作。通过这种方式，我们可以有效地控制请求的并发数量，即使在很多请求需要同时发出的情况下，也能保持系统的稳定性和响应能力。 ## p-limit p-limit 库可以帮助开发人员控制同时执行的异步任务的数量，以避免过多的并发请求对服务器造成压力。下载量非常高：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c61bfa509b28424089f78da2bd884c6a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=722\&h=138\&s=14868\&e=png\&b=1d1b1a)
这是它的基本源码： ```typescript // 定义一个函数 pLimit，它接受一个参数 `concurrency` 表示并发限制的数量 const pLimit = (concurrency) => { // 检查 `concurrency` 是否为整数或无穷大，并且大于0，否则抛出类型错误 if (!((Number.isInteger(concurrency) || concurrency === Infinity) && concurrency > 0)) { throw new TypeError('Expected `concurrency` to be a number from 1 and up'); } // 初始化队列和活跃任务计数 const queue = []; let activeCount = 0; // 定义函数 `next`，用来在任务完成后减少活跃任务计数，并从队列中取出下一个任务执行 const next = () => { activeCount--; if (queue.length > 0) { queue.shift()(); } }; // 定义函数 `run`，用来运行任务函数 `fn`，并在执行完毕后调用 `next` const run = async (fn, resolve, ...args) => { activeCount++; const result = (async () => fn(...args))(); resolve(result); try { await result; } catch {} next(); }; // 定义函数 `enqueue`，用来将任务加入队列 const enqueue = (fn, resolve, ...args) => { queue.push(run.bind(null, fn, resolve, ...args)); (async () => { await Promise.resolve(); if (activeCount < concurrency && queue.length > 0) { queue.shift()(); } })(); }; // 定义函数 `generator`，它返回一个新的 Promise，并将任务函数加入队列 const generator = (fn, ...args) => new Promise((resolve) => { enqueue(fn, resolve, ...args); }); // 通过 `Object.defineProperties` 给 `generator` 添加属性 Object.defineProperties(generator, { activeCount: { get: () => activeCount // 返回当前活跃任务的数量 }, pendingCount: { get: () => queue.length // 返回队列中等待的任务数量 }, clearQueue: { value: () => { queue.length = 0; // 清空队列 } } }); // 返回 `generator` 函数 return generator; }; // 使用 pLimit 创建一个新的限制器，限制并发数为2 const limit = pLimit(2); // 定义一个异步函数 `asyncFun`，它模拟异步操作并在延迟后解析 function asyncFun(value, delay) { return new Promise((resolve) => { console.log('value ' + value); setTimeout(() => resolve(value), delay); }); } // 立即执行的异步函数，用来并发执行多个异步任务 (async function () { // 使用 `limit` 包装异步任务，确保任务的并发数不超过2 const arr = [ limit(() => asyncFun('aaa', 2000)), limit(() => asyncFun('bbb', 1000)), limit(() => asyncFun('ccc', 1000)), limit(() => asyncFun('ccc', 1000)), limit(() => asyncFun('ccc', 1000)) ]; // 等待所有包装过的异步任务完成 const result = await Promise.all(arr); // 打印所有异步任务的结果 console.log(result); })(); ``` 这样的话，初始化推入 5 个函数到队列中，然后由于我们限制了 limit 为 2，所以 enqueue 里面的异步立即执行函数会执行两次后，达到队列限制 shift 执行 run 函数，此后每个异步函数执行完后，再判断队列的 length 是否大于 0 后，shift 队列再次执行后续的 run 函数。
所以上面代码的执行结果是：
先打印：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8332f7ec2b164d3e8c7baa8c368e0375~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=179\&h=79\&s=3096\&e=png\&b=3c3d3e)
过了 1s：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26861bbfed00403badb5e2ed4bfc4727~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=196\&h=173\&s=5677\&e=png\&b=3c3d3e)
再过 1s：
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db62fb605e0e4b86b2e41810a8c53dd6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=488\&h=187\&s=10353\&e=png\&b=3c3d3e)
针对上面有两个代码处大家可能有疑惑： 1. 为什么要 await result; 2. 为什么要 await Promise.resolve(); 在 run 函数中，await result; 的作用是确保异步函数 fn（通过 fn(...args) 执行）的 Promise 完全解决或拒绝之前，不会执行 next() 函数。这是为了保证在当前任务完成之前，不会从队列中取出新的任务来执行。这样可以确保在任何给定时间内，执行的任务数量不会超过设定的并发限制 concurrency。
在 enqueue 函数中，await Promise.resolve(); 的作用是将新的任务的启动推迟到下一个事件循环迭代。这样做允许当前正在执行的代码（例如，正在添加任务到队列中的代码）完成执行，然后才开始执行队列中的任务。这种技术称为“微任务排队”，它确保了任务的启动不会立即发生，从而允许同步代码先执行完毕，例如，允许当前的 enqueue 调用完成并将任务添加到队列中。使用 Promise.resolve() 创建一个微任务，是确保 activeCount < concurrency 的检查和可能的任务启动发生在当前执行栈清空之后的一种方式。