优雅控制并发：用 23 行代码限制 Fetch 请求

前端

2023-12-27 21:51:11

利用并发请求优化应用程序性能

在当今快节奏的数字世界中，用户期望应用程序快速且响应迅速。并发请求是一种强大的技术，可以显著提高应用程序的性能，通过同时执行多个任务，而不是按顺序等待每个任务完成。

了解并发请求

并发请求允许应用程序同时向服务器发送多个请求，而无需等待每个请求的响应。这在需要从不同来源获取大量数据或执行多个耗时的操作时特别有用。

控制并发：避免服务器过载

虽然并发请求可以提高性能，但如果没有适当的控制，也可能导致服务器过载。如果应用程序同时发送过多的请求，服务器可能会不堪重负，导致响应时间慢或甚至崩溃。

使用并发限制函数

为了避免服务器过载，可以使用并发限制函数来控制并发请求的数量。此函数将限制应用程序同时执行的请求数，确保服务器不会不堪重负。

实现并发限制函数

使用 JavaScript 的 Promise 和 Fetch API，我们可以创建自己的并发限制函数。以下是如何用 23 行代码实现的：

// 最大并发数
const maxConcurrency = 2;

// 请求队列
const queue = [];

// 正在进行的请求数
let activeRequests = 0;

// 执行请求
const fetchWithConcurrency = (url, options) => {
  return new Promise((resolve, reject) => {
    // 请求入队
    queue.push({ url, options, resolve, reject });

    // 检查是否可以执行请求
    checkQueue();
  });
};

// 检查队列并执行请求
const checkQueue = () => {
  // 达到最大并发数，则等待
  if (activeRequests >= maxConcurrency) {
    return;
  }

  // 从队列中取出请求
  const { url, options, resolve, reject } = queue.shift();

  // 发送请求
  activeRequests++;
  fetch(url, options)
    .then(res => {
      resolve(res);
      activeRequests--;
      checkQueue();
    })
    .catch(err => {
      reject(err);
      activeRequests--;
      checkQueue();
    });
};

使用并发限制函数

编写好并发限制函数后，我们就可以在应用程序中使用了。例如，以下是如何使用我们的 fetchWithConcurrency 函数来发送并发请求：

// 发送并发请求
const promises = [];
for (let i = 0; i < 10; i++) {
  promises.push(fetchWithConcurrency(`https://example.com/api/v1/users/${i}`, {
    method: 'GET',
  }));
}

// 等待所有请求完成
Promise.all(promises).then(responses => {
  // 处理响应
});