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

在JavaScript编程中，批量请求（Batch Request）是一种优化网络性能的技术，它允许开发者将多个HTTP请求合并成一个或少数几个请求来减少网络负担。这里我们将深入探讨如何利用JavaScript实现一个批量请求函数`multiRequest`，它接受一个URL数组和最大并发数作为参数。 批量请求的主要目标是提高应用性能，降低服务器压力，以及减少由于多次请求导致的延迟。在现代Web开发中，尤其是在处理API调用时，批量请求策略尤为关键。 我们需要理解`multiRequest`函数的两个参数： 1. `urls`：这是一个包含多个URL的数组，每个URL对应一个需要发送的HTTP请求。 2. `maxNum`：这是最大并发数，指同一时间可以进行的最大请求数量。 为了实现`multiRequest`，我们可以采用以下步骤： 1. **初始化**: 创建一个空数组`pendingRequests`用于存储当前正在进行的请求，以及一个空数组`completedResults`用于存储完成的请求结果。 2. **处理并发**: 使用一个循环或`Array.prototype.forEach()`方法遍历`urls`数组。对于每个URL，我们需要检查当前并发请求数是否小于`maxNum`。如果是，则发起请求；否则，等待一个请求完成后再继续。 3. **发起请求**: 使用`fetch` API或者`XMLHttpRequest`来发送HTTP请求。创建一个回调函数，该函数会在请求完成时被调用，无论成功还是失败。 4. **回调处理**: 在回调函数中，将完成的请求从`pendingRequests`移除，并将结果添加到`completedResults`。同时，检查是否有新的请求可以发起，如果有，则继续执行请求。 5. **返回结果**: 当所有请求都完成时，返回`completedResults`数组。 下面是一个简单的`multiRequest`函数实现，使用了`fetch` API： ```javascript function multiRequest(urls, maxNum) { let pendingRequests = []; const completedResults = []; function sendRequest(url) { fetch(url) .then(response => response.json()) .then(data => { completedResults.push(data); const index = pendingRequests.indexOf(url); if (index !== -1) { pendingRequests.splice(index, 1); } nextRequest(); }) .catch(error => { console.error('Error:', error); const index = pendingRequests.indexOf(url); if (index !== -1) { pendingRequests.splice(index, 1); } nextRequest(); }); } function nextRequest() { while (pendingRequests.length < maxNum && urls.length > 0) { const url = urls.shift(); pendingRequests.push(url); sendRequest(url); } } urls.forEach(url => { pendingRequests.push(url); }); nextRequest(); return new Promise(resolve => { const intervalId = setInterval(() => { if (pendingRequests.length === 0) { clearInterval(intervalId); resolve(completedResults); } }, 100); }); } // 使用示例 const urls = ['url1', 'url2', 'url3', 'url4']; const maxNum = 2; multiRequest(urls, maxNum).then(results => { console.log('All requests completed:', results); }); ``` 在上述代码中，我们使用了`Promise`和`setInterval`来跟踪请求状态并等待所有请求完成。当所有请求完成后，`multiRequest`函数会返回一个包含所有结果的数组。 这个`multiRequest`函数只是一个基础实现，实际应用中可能需要考虑更多细节，比如错误处理、超时设定、请求取消等。在大型项目中，你可能还会使用像`axios`或`superagent`这样的库，它们提供了更丰富的功能和更好的性能优化。