JavaScript中.then()内修改的变量外部无法访问的问题排查与解决

Hey there! Let's break down what's happening here and get your array populated properly.

The Root Cause #

This all comes down to how asynchronous JavaScript works:

• getObject(item.id) returns a Promise, which means the code inside .then() won't run until all your synchronous code has finished executing.
• array2.forEach() is a synchronous loop—it fires off every getObject call right away, but it doesn't wait for any of those async operations to finish. So when you try to access array1 outside the .then() blocks, none of the array1.push(object) lines have actually run yet. That's why it's still empty!

Fixes You Can Use #

1. Use async/await with for...of (Most Readable) #

Wrap your logic in an async function and use a for...of loop instead of forEach. This lets you wait for each async call to finish before moving to the next, ensuring array1 is fully populated when you need it:

async function populateArray() {
  const array1 = [];
  for (const item of array2) {
    const object = await getObject(item.id);
    array1.push(object);
  }
  // Now array1 has all your objects!
  console.log(array1);
  return array1;
}

// To use the array outside the function:
populateArray().then(fullArray => {
  // Do whatever you need with fullArray here
  console.log("Outside function:", fullArray);
});

2. Use Promise.all() (Faster, Parallel Execution) #

If your getObject calls don't depend on each other, use Promise.all() to run them all in parallel. This is way more efficient than waiting for each one sequentially:

// First, create an array of all your Promises
const allPromises = array2.map(item => getObject(item.id));

// Wait for all Promises to resolve
Promise.all(allPromises).then(array1 => {
  // array1 is already the full array of results!
  console.log(array1);
  // Handle your logic that needs array1 here
});

Why forEach Doesn't Work Here #

Even if you add async to the forEach callback, forEach doesn't respect async/await—it will just fire off all the async calls without waiting for any to complete. So your array1 will still be empty when you try to access it outside the .then() blocks.

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