如何用jQuery实现分批并行Ajax请求？解决批量请求阻塞问题

Got it, this sharded parallel request approach is perfect for avoiding overwhelming either the browser or your server when dealing with large numbers of AJAX calls. Let's put together a clean implementation that follows your exact requirement: first run 100 parallel requests, wait for all of them to finish, then kick off the next batch of 200.

Step 1: Helper function for single AJAX requests #

First, let's write a reusable function to handle individual AJAX calls. I'll use fetch here (you can swap it for Axios or another library if you prefer) and include basic error handling:

async function makeAjaxRequest(requestConfig) {
  try {
    const response = await fetch(requestConfig.url, {
      method: requestConfig.method || 'GET',
      headers: requestConfig.headers || { 'Content-Type': 'application/json' },
      body: requestConfig.body ? JSON.stringify(requestConfig.body) : undefined
    });

    if (!response.ok) {
      throw new Error(`Request failed with status: ${response.status}`);
    }

    return await response.json(); // Adjust this based on your response format (e.g., text())
  } catch (error) {
    console.error(`Failed to fetch ${requestConfig.url}:`, error);
    // Choose how to handle failures:
    // - Throw the error to fail the entire batch: throw error;
    // - Return error details to continue processing the rest:
    return { success: false, error: error.message, url: requestConfig.url };
  }
}

Step 2: Batch execution function #

This function takes a list of requests and runs them in parallel, returning a promise that resolves when all requests are done:

async function executeBatch(requests) {
  // Map each request to a promise, then wait for all to resolve
  const requestPromises = requests.map(req => makeAjaxRequest(req));
  return await Promise.all(requestPromises);
}

Step 3: Sharded workflow implementation #

Now we'll split your request array into the specified batches and run them sequentially:

// Replace this with your actual array of request configurations
const allRequests = [/* Your 1000+ request objects here */];

async function runShardedRequests() {
  // First batch: 100 requests
  console.log("Starting first batch (100 requests)...");
  const firstBatch = allRequests.slice(0, 100);
  const firstBatchResults = await executeBatch(firstBatch);
  console.log(`First batch complete! Processed ${firstBatchResults.length} requests.`);

  // Second batch: next 200 requests
  console.log("Starting second batch (200 requests)...");
  const secondBatch = allRequests.slice(100, 300); // Indexes 100 to 299 = 200 items
  const secondBatchResults = await executeBatch(secondBatch);
  console.log(`Second batch complete! Processed ${secondBatchResults.length} requests.`);

  // Optional: Add more batches if you have remaining requests
  // const remainingRequests = allRequests.slice(300);
  // if (remainingRequests.length > 0) {
  //   console.log(`Starting final batch (${remainingRequests.length} requests)...`);
  //   const remainingResults = await executeBatch(remainingRequests);
  //   console.log(`Final batch complete! Processed ${remainingResults.length} requests.`);
  // }

  // Combine all results if needed
  return [...firstBatchResults, ...secondBatchResults];
}

// Kick off the workflow
runShardedRequests()
  .then(allResults => console.log(`All sharded requests finished! Total results: ${allResults.length}`))
  .catch(globalError => console.error("Fatal error in sharded workflow:", globalError));

Key Notes to Consider #

• Error Handling: The example returns error details instead of failing the entire batch, so one bad request won't take down the whole batch. If you want to halt execution on any failure, uncomment the throw error line in makeAjaxRequest.
• Server/Browser Limits: Browsers have default limits on concurrent requests per domain (usually 6-8), so 100 parallel requests will be queued by the browser. This is still better than flooding it with 1000 at once, though. Adjust batch sizes if you still see issues.
• Flexibility: You can easily adjust batch sizes (e.g., 150 instead of 100) or add dynamic batching (e.g., split into equal chunks) if your needs change later.

内容的提问来源于stack exchange，提问作者sridharnetha