javascript的async/await怎样使用_它们如何简化异步代码?

async/await 是 JavaScript 中基于 Promise 的异步语法糖,使异步代码更直观;async 函数自动返回 Promise,await 只能在其中使用并暂停执行直至 Promise settle,需注意错误处理与并发优化。

async/await 是 JavaScript 中处理异步操作的语法糖,它让异步代码写起来像同步代码一样直观,同时底层仍基于 Promise。

async 函数的基本写法

在函数声明前加 async 关键字,该函数会自动返回一个 Promise。即使你 return 一个普通值,也会被包装成 resolved 的 Promise。

  • 如果 return 一个 Promise,那返回的就是它本身
  • 如果 throw 错误,等价于返回 rejected 的 Promise
  • 不能直接在全局作用域或普通函数中用 await,必须在 async 函数内部

await 让等待变自然

await 只能出现在 async 函数里,它会暂停函数执行,直到右侧的 Promise settle(fulfilled 或 rejected),然后继续往下走。

  • await 后面不一定是 Promise,也可以是任意值——非 Promise 值会被自动转成 resolved Promise
  • await Promise.reject(...) 会抛出错误,需要用 try/catch 捕获
  • 避免多个 await 串行执行造成性能浪费,可改用 Promise.all 并发请求

对比传统 Promise 写法更清晰

比如获取用户数据再获取其文章:

用 Promise 链写:

getUser().then(user => getPosts(user.id)).then(posts => console.log(posts)).catch(err => console.error(err))

用 async/await 写:

async function loadUserPosts() {
  try {
    const user = await getUser();
    const posts = await getPosts(user.id);
    console.log(posts);
  } catch (err) {
    console.error(err);
  }
}

逻辑更接近人类阅读顺序,错误处理也集中明确。

常见注意事项

  • await 不会阻塞整个线程,只是暂停当前 async 函数的执行,其他代码仍可运行
  • 不要在循环里盲目 await(如 for 循环逐个请求),考虑是否需要并发控制
  • 顶层 await 在模块中可用(ES2025+),但脚本中仍需包裹在 async 函数或 IIFE 里

基本上就这些。async/await 不复杂但容易忽略细节,用熟了会让异步逻辑一目了然。