贝利信息

javascript async await_如何简化异步代码

日期:2026-01-11 00:00 / 作者:夢幻星辰
async/await 能替代 Promise.then 且更直观,本质是 Promise 的语法包装;await 只能在 async 函数中使用,顶层 await 需 ES 模块支持;需用 try/catch 正确捕获错误,注意并发控制与错误隔离。

async/await 是什么,它真能替代 Promise.then?

能,而且更直观。async/await 不是新语法糖,而是 Promise 的语法包装,底层完全基于 Promise。只要函数用 async 声明,它就自动返回一个 Promise;在函数体内用 await 等待的值,无论原本是不是 Promise,都会被自动 Promise.resolve() 包裹。

await 只能在 async 函数里用,但顶层 await 有例外

直接在模块顶层写 await 会报错 SyntaxError: await is only valid in async function,除非你:

try/catch 比 .catch() 更自然,但别漏掉错误边界

await 后抛出的错误不会冒泡到外层同步代码,必须用 try/catch 捕获。这比链式 .catch() 更贴近同步思维,但也容易误以为“没写 catch 就不会出错”。

常见疏忽:

并发请求别盲目 await,注意串行 vs 并行

连续写多个 await 是串行执行,耗时累加;想并行,得先发起所有 Promise,再统一 await:

const [user, posts, comments] = await Promise.all([
  fetch('/api/user').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json())
])

关键点:

实际写法中,最常被忽略的是错误传播路径和并发控制粒度——不是所有 await 都该平铺直写,也不是每个异步操作都值得单独拎成 async 函数。