JavaScript中为何await仅能在async函数中使用？

Great question! Let's break this down step by step, tying back to the examples you shared.

First, let's recap what async does—this is foundational to understanding await's constraints:

• An async function automatically wraps its return value (even a primitive like 1) in a resolved Promise. As you showed:

  async function f() { return 1; }
  f().then(alert); // Alerts 1, because f() returns Promise.resolve(1)
  

• More importantly, async tells the JavaScript engine that this function will use asynchronous logic that can be paused and resumed without blocking the entire program.

Now, why does await require this async wrapper?

1. await depends on the async function's "pause/resume" mechanism #

When you use await on a Promise, it does two critical things:

• It pauses execution of the current async function only (not the entire JavaScript runtime).
• It lets the main thread handle other tasks—like user clicks, network requests, or timers—while waiting for the Promise to resolve.
• Once the Promise settles, the async function picks up where it left off.

Take your example:

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000);
  });
  let result = await promise; // Pauses f() here, but the main thread keeps running
  alert(result); // Runs 1 second later, after the Promise resolves
}
f();

If await were allowed outside an async function, the JS engine wouldn't have a way to "pause" just part of the code. It would have to block the entire main thread while waiting for the Promise—this would freeze browsers or Node.js runtimes, which goes against JavaScript's core non-blocking, asynchronous design.

2. Top-level await is a limited exception #

You might have heard of top-level await in modern JS, but this only works in ES modules (files loaded with type="module"). Modules are loaded asynchronously by default, so the engine can handle the pause without blocking the entire program. Even then, it's tied to the module's asynchronous loading lifecycle—not a free pass to use await in any synchronous context.

To sum it up: #

async marks a function as a safe container for asynchronous logic that can be paused and resumed. await needs this container because it can't pause synchronous code without breaking JavaScript's non-blocking model. The pair works together to make asynchronous code read like synchronous code, without sacrificing the runtime's responsiveness.

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