async/await 是 Promise 的封装而非语法糖,async 函数必返回 Promise,await 只能在 async 函数内使用,需配合 try/catch 处理错误,且不阻塞主线程。

直接用 async 和 await 就能写出接近同步逻辑的异步代码,但前提是理解它不是语法糖的“魔法”,而是 Promise 的封装层——写错地方、漏掉 try/catch、误判执行时机,都会让“优雅”变成“诡异”。
async 函数返回值永远是 Promise
哪怕你 return 42,函数实际返回的是 Promise.resolve(42);如果 throw new Error(),则等价于 Promise.reject(...)。这决定了你不能在普通函数里直接接收“结果”,必须用 await 或 .then() 拆包。
- 错误写法:
function fetchData() { return async () => { /* ... */ }; } const result = fetchData(); // 这是函数,不是 Promise - 正确写法:
async function fetchData() { const res = await fetch('/api'); return res.json(); } const promise = fetchData(); // ✅ 返回 Promise - 调用时必须处理 Promise:要么
await fetchData()(在另一个async函数里),要么fetchData().then(...)
await 只能在 async 函数内部使用
这是语法限制,不是运行时错误。ESLint 会报 Parsing error: 'await' is only allowed within async functions,浏览器直接 SyntaxError。
- 常见翻车场景:
function handleButton() { const data = await getData(); // ❌ 报错:不在 async 函数中 } - 修复方式只有两种:
– 把外层函数标记为async:async function handleButton() { const data = await getData(); }
– 或者不用await,改用链式.then():function handleButton() { getData().then(data => { /* ... */ }); } - 注意:箭头函数也要显式声明
async:const fn = async () => { await something(); },不能省略async
忘记 try/catch 会导致未捕获异常
await 遇到 rejected Promise 会像 throw 一样中断执行,但不会自动被上层捕获——它会冒泡成未处理的 Promise rejection,控制台报黄(或红)字,Node.js 可能直接退出进程。
立即学习“Java免费学习笔记(深入)”;
- 危险写法:
async function login() { const res = await fetch('/login', { method: 'POST' }); const json = await res.json(); // 如果 res.status >= 400,res.json() 可能失败 return json.token; } - 安全写法(推荐):
async function login() { try { const res = await fetch('/login', { method: 'POST' }); if (!res.ok) throw new Error(`HTTP ${res.status}`); const json = await res.json(); return json.token; } catch (err) { console.error('Login failed:', err); throw err; // 或者返回默认值、重定向等 } } - 小技巧:对多个 await 做统一错误处理,比每个都包
try/catch更干净;但如果某一步失败不影响后续(比如并行请求),就该用Promise.allSettled()
await 不阻塞整个线程,但会暂停当前 async 函数执行
这是最容易误解的一点:很多人以为 await 会让 JS 引擎“卡住”,其实它只是暂停当前函数,把控制权交还给事件循环,其他任务(如定时器、用户点击)照常运行。
- 典型误区:
async function delayAndLog() { console.log('start'); await new Promise(r => setTimeout(r, 1000)); console.log('end'); // 这行会在 1s 后执行,但期间页面不卡顿 } delayAndLog(); console.log('immediate'); // ✅ 立刻输出 - 性能提示:连续 await 是串行的,想并发请用
Promise.all([p1, p2, p3]),再await Promise.all(...) - 调试注意:Chrome DevTools 的 “Async stack traces” 要开启才能看到完整的 await 调用链,否则断点跳转容易丢失上下文
真正难的不是写 async/await,而是判断哪一层该 await、哪一层该抛出错误、哪一层该兜底降级——这些没法靠语法解决,得结合业务流程和失败容忍度来设计。











