实现一个批量请求函数 multiRequest(urls, maxNum)

在前端开发中，处理多个异步请求的一种常见需求是批量请求，并限制并发请求的数量以避免对服务器造成过大压力或浏览器资源耗尽。你可以使用 Promise.all、Array.prototype.map 和 Array.prototype.reduce 等方法来实现一个批量请求函数 multiRequest，该函数接受一个 URL 数组和一个最大并发请求数 maxNum。

以下是一个可能的实现：

function multiRequest(urls, maxNum) {
  const makeRequest = url => fetch(url).then(response => response.json());

  // 使用reduce实现批量请求控制
  const requestBatch = (urls = [], index = 0, maxConcurrent = maxNum, results = []) => {
    if (index >= urls.length) {
      return Promise.resolve(results);
    }

    const batchEnd = Math.min(index + maxConcurrent, urls.length);
    const batch = urls.slice(index, batchEnd).map(makeRequest);

    return Promise.all(batch).then(batchResults => {
      return requestBatch(urls, batchEnd, maxConcurrent, results.concat(batchResults));
    });
  };

  return requestBatch(urls);
}

// 使用示例
const urls = [
  'https://jsonplaceholder.typicode.com/todos/1',
  'https://jsonplaceholder.typicode.com/todos/2',
  'https://jsonplaceholder.typicode.com/todos/3',
  'https://jsonplaceholder.typicode.com/todos/4',
  'https://jsonplaceholder.typicode.com/todos/5'
];

multiRequest(urls, 2).then(results => {
  console.log(results);
}).catch(error => {
  console.error('Error fetching data:', error);
});

解释

1. makeRequest 函数：这是一个辅助函数，用于创建单个请求并返回一个 Promise，该 Promise 解析为请求的 JSON 响应。

2. requestBatch 函数：这是一个递归函数，用于控制并发请求的数量。它接受四个参数：

   • urls：要请求的 URL 数组。
   • index：当前处理的 URL 数组的索引。
   • maxConcurrent：允许的最大并发请求数。
   • results：收集到的请求结果数组。

3. 批量处理：

   • 首先检查是否处理完所有 URL，如果是，则返回结果数组。
   • 否则，根据 maxConcurrent 确定当前批次处理的 URL 数量，并发出这些请求。
   • 使用 Promise.all 等待当前批次的所有请求完成，然后将结果合并到 results 数组中，并递归调用 requestBatch 处理下一个批次。

4. 返回 Promise：multiRequest 函数返回 requestBatch 的调用结果，该结果是一个 Promise，解析为所有请求的结果数组。

通过这种方式，你可以有效地控制并发请求的数量，同时处理多个异步请求。