JavaScript同步执行问题求助：for循环未获预期输出

Hey there! Let's break down why your code isn't behaving as expected and how to fix it.

The Core Issues #

First, let's look at what's going wrong:

• Asynchronous Operations: The request function is asynchronous—it doesn't block the loop while waiting for the API response. So your loop will run all 4 iterations immediately, and the console.log(i + ": " + makeARestCall(options)) will print i: undefined each time because makeARestCall doesn't return anything. The actual API response logs (Hello: [count]) will show up later, after all loop iterations are done.
• Loop Variable Scope: Since you're using a global i (no let/const declaration), by the time the asynchronous callbacks fire, i will already be 5 (the value that exits the loop), so if you tried to reference i in the callback, you'd get the wrong value.

Solution: Use Promises and Async/Await #

The cleanest way to handle this is to wrap your asynchronous API call in a Promise, then use async/await to make the loop wait for each call to finish.

Step 1: Rewrite makeARestCall to return a Promise

function makeARestCall(options) {
  // Return a Promise that resolves with the count, or rejects with an error
  return new Promise((resolve, reject) => {
    request(options, function(error, response, body) {
      if (error) {
        reject(new Error(error)); // Reject on error
        return;
      }
      let test = getCount(body);
      resolve(test); // Resolve with the count we want
    });
  });
}

Step 2: Use an Async Function for the Loop

Wrap your loop in an async function so you can use await to pause each iteration until the API call completes:

async function runLoop() {
  // Use let to declare i locally—this fixes the scope issue
  for (let i = 1; i < 5; i++) { 
    try {
      const count = await makeARestCall(options); // Wait for the API response
      console.log(`${i}: ${count}`); // Now we have the count to log
    } catch (err) {
      console.error(`Error in iteration ${i}:`, err); // Handle errors gracefully
    }
  }
}

// Run the loop function and catch any top-level errors
runLoop().catch(err => console.error("Fatal error:", err));

Bonus: Parallel Execution (If Order Doesn't Matter) #

If you don't need the API calls to run one after another, you can run them in parallel with Promise.all for better performance:

async function runParallel() {
  const promises = [];
  
  // Collect all the API call promises first
  for (let i = 1; i < 5; i++) {
    // Attach the iteration number to each promise result
    const promise = makeARestCall(options).then(count => ({ i, count }));
    promises.push(promise);
  }
  
  // Wait for all promises to resolve
  const results = await Promise.all(promises);
  
  // Log the results (order might not match loop iteration, but all are done)
  results.forEach(result => {
    console.log(`${result.i}: ${result.count}`);
  });
}

runParallel().catch(err => console.error("Fatal error:", err));

Why This Works #

• Promises let us handle asynchronous operations in a more readable way, turning callback-based code into something that looks synchronous.
• await pauses the execution of the async function until the Promise resolves, so each loop iteration waits for the API call to finish before moving on.
• Local let i ensures each iteration has its own copy of i, so even if we used it in an asynchronous context, it would hold the correct value.

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