javascript async/await是什么_怎样简化异步代码【教程】

2026-01-29 00:00:00 作者：夢幻星辰

async/await 是 Promise 的语法封装，不改变异步本质但降低回调嵌套与错误处理复杂度；async 函数必返回 Promise，抛错即 Promise.reject()；await 仅限 async 函数内使用，循环串行需用 for...of，并发用 Promise.all，错误须显式 try/catch。

async/await 不是新语法糖，而是 Promise 的语法封装，它本身不改变异步本质，但能显著降低回调嵌套和错误处理的复杂度。

async 函数返回值一定是 Promise

哪怕你写 async function foo() { return 42 }，实际返回的是 Promise.resolve(42)。这意味着你不能直接拿到 42，必须用 await 或 .then() 拆包。

如果函数内部抛错（throw new Error()），返回的是 Promise.reject()，不是普通异常
return await promise 和 return promise 在绝大多数场景下等价，但前者多一次微任务等待，无必要时不建议套用
顶层 await 只在模块作用域（type="module"）或 REPL 中合法，普通脚本中会报 Uncaught SyntaxError: await is only valid in async function

await 只能在 async 函数里用

这是硬性限制。试图在普通函数、事件回调、setTimeout 回调里写 await 会直接报错：Uncaught SyntaxError: await is not allowed in this context。

常见误写：document.addEventListener('click', async () => { await fetch(...) }) —— 这没问题；但写成 document.addEventListener('click', () => { await fetch(...) }) 就崩
循环中想串行 await？用 for...of，别用 forEach：后者回调无法被 await 暂停，所有请求会并发发出
需要并发执行多个异步操作？用 Promise.all([p1, p2, p3]) 包一层再 await，而不是逐个 await

错误处理必须显式 try/catch 或 .catch()

await 遇到 rejected Promise 会把错误“抛出”到当前 async 函数作用域，但不会自动冒泡到外层——没捕获就变成 unhandled rejection。

不要依赖外围 window.onerror 或 process.on('unhandledRejectio n') 来兜底，它们只是补救，不是设计手段
try { await fetch('/api') } catch (err) { console.error(err) } 是标准姿势；漏掉 try/catch 是线上静默失败的高频原因
如果某个 await 后续逻辑不依赖前序成功（比如日志上报），可用 await promise.catch(() => {}) 吞掉错误，避免中断流程