javascript await是什么_它如何在async函数中暂停执行?

await 不阻塞线程,而是将后续代码注册为 Promise.then 回调并让出执行权;只在 async 函数内有效,自动包装非 Promise 值,本质是语法糖。

await 不是让 JS 线程“暂停”或“阻塞”,而是告诉 JavaScript 引擎:“等这个 Promise settle(fulfilled 或 rejected)后再继续执行下面的语句”。它只在 async 函数内部有效,且必须接一个 Promise(或可转为 Promise 的值)。

await 只能在 async 函数里用,否则 SyntaxError

直接写 await fetch('/api') 会报错:SyntaxError: await is only valid in async function。因为 await 依赖 async 函数提供的上下文来挂起/恢复执行逻辑。

正确写法:

async function getData() {
  const res = await fetch('/api');
  const data = await res.json();
  return data;
}

错误写法(顶层或普通函数中):

立即学习“Java免费学习笔记(深入)”;

function bad() {
  await fetch('/api'); // ❌ SyntaxError
}
  • async 函数本身返回一个 Promise,哪怕你 return 42,实际返回的是 Promise.resolve(42)
  • 不加 async 就不能用 await,没有例外
  • 箭头函数也可以是 asyncconst fn = async () => { ... }

await 后面不是 Promise?JS 会自动包装

await 并不强制要求右边是 Promise。如果值不是 Promise(比如数字、字符串、对象),JS 会立即用 Promise.resolve() 包一层,然后同步 resolve —— 表现就是“没等待,直接往下走”。

示例:

async function example() {
  console.log('start');
  const a = await 123;        // ✅ 合法,等同于 Promise.resolve(123)
  console.log(a);             // 123,立刻输出
  const b = await Promise.resolve(456);
  console.log(b);             // 456
  const c = await Promise.reject('oops');
  console.log(c);             // ❌ 不会执行,抛出错误
}
  • await 123await Promise.resolve(123) 效果一致,但前者无异步延迟
  • 真想“暂停”必须靠真正的异步操作(如 fetchsetTimeout 返回的 Promise
  • 若误把同步值当异步等,代码看似用了 await,实则没任何等待效果

await 不阻塞主线程,只是让当前 async 函数“让出控制权”

很多人以为 await 像 Python 的 time.sleep() 那样停住线程 —— 实际上 JS 是单线程事件驱动模型,await 只是把后续代码注册为 Promise.then() 回调,然后立即返回,让出执行权给事件循环处理其他任务(比如渲染、用户输入、其他 microtask)。

所以这段代码不会卡住页面:

async function slowButNonBlocking() {
  console.log('before');
  await new Promise(r => setTimeout(r, 2000));
  console.log('after'); // 2秒后才执行,但页面仍可滚动、点击
}
  • await 后的代码属于 microtask,优先级高于 setTimeout(macrotask)
  • 多个 await 是串行的,但每个 await 之间可能穿插其他 microtask
  • 真正阻塞主线程的是长时间运行的同步代码(如大循环),不是 await

最容易被忽略的一点:await 的“暂停”是函数级别的,不是作用域或块级的;它不影响外层调用栈,也不冻结变量生命周期。一旦你理解了它背后是 Promise.then 的语法糖,很多看似奇怪的行为(比如 try/catch 捕获时机、变量提升表现)就自然说得通了。