17370845950

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，没有例外
• 箭头函数也可以是 async：const 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 123 和 await Promise.resolve(123) 效果一致，但前者无异步延迟
• 真想“暂停”必须靠真正的异步操作（如 fetch、setTimeout 返回的 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 捕获时机、变量提升表现）就自然说得通了。