JavaScript中async/await未正确等待问题求助

Hey there! Let’s break down why your async/await code might not be waiting as expected, using the partial code you shared and common pitfalls that cause this issue.

First, let’s complete your incomplete foo function to replicate a typical scenario where waiting fails—since your code cuts off at con..., I’ll assume you had a call to bar without the critical await keyword:

function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
async function baz(input) { console.log("4"); await sleep(1000); console.log("5"); return input; }
async function bar(input) { console.log("3"); return await baz(input); }
async function foo() { 
  console.log("2"); 
  // Common mistake: calling async function without await
  bar("test"); 
  console.log("6"); 
}

foo();

If you run this, the output order will be: 2 → 3 → 4 → 6 → 5. Notice 6 prints before 5—that’s because foo doesn’t wait for bar (and its nested baz) to finish executing.

Top Reasons Async/Await Fails to Wait #

Let’s go through the most common culprits:

• Forgot await before an async function call
  This is the #1 issue. Async functions return promises, and without await, your code will treat the promise as a regular value and move on immediately. Fixing the foo function above is simple—just add await before bar("test"):

  async function foo() { 
    console.log("2"); 
    await bar("test"); 
    console.log("6"); 
  }
  

  Now the output order will be 2 → 3 → 4 → 5 → 6, as expected.

• Calling async functions in non-async contexts without handling promises
  If you need to run an async function from a non-async function, you can’t use await directly. Instead, use .then() to handle the resolved promise:

  function foo() { 
    console.log("2"); 
    bar("test").then(() => console.log("6")); 
  }
  

  This ensures 6 only prints after bar and baz complete.

• Misusing async/await in loops (e.g., forEach)
  If your internal app uses loops to call async functions, forEach won’t wait for await to resolve. Use a for...of loop instead:

  async function processItems(items) {
    // Bad: forEach doesn't wait for await
    items.forEach(async item => {
      await baz(item);
    });
  
    // Good: for...of waits for each iteration
    for (const item of items) {
      await baz(item);
    }
  }
  

• Uncaught promise rejections
  If your async function throws an error that’s not caught, the promise will reject silently (in older environments) and it might look like the code didn’t finish executing. Always wrap await calls in try/catch blocks to handle errors:

  async function foo() { 
    console.log("2"); 
    try {
      await bar("test"); 
    } catch (err) {
      console.error("Error:", err);
    }
    console.log("6"); 
  }
  

Final Check for Your Internal App #

Since you can’t share the actual code, start by verifying:

1. Every call to an async function that needs to complete before proceeding has an await keyword.
2. If you’re using async functions in loops, you’re using for...of (or a similar sequential approach) instead of forEach or map.
3. All promise rejections are caught with try/catch or .catch().

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