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 捕获时机、变量提升表现)就自然说得通了。











