前端开发必备之请求并发数量限制

前端异步请求并发控制是指在客户端(通常是在浏览器中)管理和控制同时发出的异步请求的数量的技术。在进行网络请求,如使用 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 库可以帮助开发人员控制同时执行的异步任务的数量,以避免过多的并发请求对服务器造成压力。下载量非常高:

这是它的基本源码:

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 函数。

所以上面代码的执行结果是:

先打印:

过了 1s:

再过 1s:

针对上面有两个代码处大家可能有疑惑:

  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 的检查和可能的任务启动发生在当前执行栈清空之后的一种方式。

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
SRY122404193 小时前
javaSE面试题
java·开发语言·面试
FakeOccupational4 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐4 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄5 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
不二人生6 小时前
SQL面试题——连续出现次数
hive·sql·面试
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser7 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui