JavaScript如何利用Promise控制并发请求个数

如果我们需要在JavaScript中同时发起多个异步请求，我们可以通过使用Promise.all来实现并发处理。但是，如果我们的请求数量非常庞大，我们可能需要控制并发请求数量，以避免对系统造成过度的压力。下面是一些如何使用Promise来控制并发请求个数的技巧。

控制并发请求个数的方法

1. 限制最大并发数

我们可以使用一个计数器和一个for或者while循环来实现。首先，我们定义一个可控并发数量max的变量，然后只有当并发请求数量小于max时才发起异步请求。

const urls = [url1, url2, url3, url4, url5];
const max = 3 // 控制最大并发数

async function handleRequests() {
  let current = 0;
  while (current < urls.length) {
    if (current < max) {
      fetch(urls[current++])
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error));
    } else {
      await new Promise(resolve => setTimeout(resolve, 1000)); // 1秒后再次检查
    }
  }
}

handleRequests();

1. 利用递归实现

我们可以使用递归调用函数来控制并发量。在处理每个请求时，我们使用Promise.resolve对其进行封装，然后使用await等待其完成，当达到最大并发数时，我们使用等待Promise链中最前面的Promise解决，然后通过递归调用函数继续发送请求。

const urls = [url1, url2, url3, url4, url5];
const max = 3 // 控制最大并发数

function handleRequests(urls) {
  return new Promise((resolve, reject) => {
    const result = [];
    let count = 0;
    const next = () => {
      if (count >= urls.length) {
        resolve(result)
      }
      if (count < urls.length) {
        const currentUrl = urls[count++];
        const currentPromise = fetch(currentUrl)
          .then(response => response.json())
          .then(data => {
            result.push(data);
            return data;
          })
          .catch(e => {
            reject(e);
          })
        Promise.resolve(currentPromise).then(next).catch(e => {
          reject(e);
        });
      }
    }
    for (let i = 0; i < max; i++) {
      next();
    }
  })
}

handleRequests(urls).then(data => console.log(data)).catch(error => console.error(error))

两条实例说明

1. 并发请求API数据

我们有一组URL，我们需要在JavaScript中以控制并发数的方式访问它们。我们可以使用Promise来控制并发，如以下示例：

const urls = [
  'https://jsonplaceholder.typicode.com/todos',
  'https://jsonplaceholder.typicode.com/posts',
  'https://jsonplaceholder.typicode.com/users',
  'https://jsonplaceholder.typicode.com/comments'
];

async function handleRequests() {
  const max = 2; // 控制最大并发数
  const results = [];
  let current = 0;
  while (current < urls.length) {
    if (current < max) {
      const response = await fetch(urls[current++]);
      const data = await response.json();
      results.push(data);
    } else {
      await new Promise(resolve => setTimeout(resolve, 1000)); // 1秒后再次检查
    }
  }
  console.log(results);
}

handleRequests();

1. 并发请求图片资源

我们有一组图片URL，我们需要在JavaScript中以控制并发数的方式加载它们。与前面的示例类似，我们可以使用Promise来控制并发。

const imgUrls = [
  'https://picsum.photos/200',
  'https://picsum.photos/300',
  'https://picsum.photos/400',
  'https://picsum.photos/500',
  'https://picsum.photos/600'
];

const loadImage = url =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Unable to load image ${url}`));
    };
    img.src = url;
  });

async function loadImages() {
  const max = 3; // 控制最大并发数
  const result = [];
  let current = 0;
  while (current < imgUrls.length) {
    if (current < max) {
      const img = await loadImage(imgUrls[current++]);
      result.push(img);
    } else {
      await new Promise(resolve => setTimeout(resolve, 1000)); // 1秒后再次检查
    }
  }
  console.log(result);
}

loadImages();

以上两个示例都使用Promise方式控制并发数量实现。第一个示例在控制API请求的数量，第二个示例在控制图片请求的数量。