async/await 是 JavaScript 中基于 Promise 的异步语法糖,使异步代码更线性易读:async 函数自动返回 Promise,await 在 async 内暂停执行并等待 Promise 完成。

async 和 await 是 JavaScript 中处理异步操作的语法糖,本质是 Promise 的封装,目标是让异步代码写起来像同步代码一样自然、线性、易读。
async:声明一个自动返回 Promise 的函数
加了 async 关键字的函数,无论你 return 什么,它都会被自动包装成 Promise.resolve()。即使你直接 return 一个字符串或数字,调用它时拿到的也一定是一个 Promise 对象。
- 普通函数:
function f() { return 'ok' }→ 返回字符串 - async 函数:
async function f() { return 'ok' }→ 返回Promise - 你不需要手动写
return Promise.resolve(...),async 已帮你做了 - 箭头函数也能用:
const getData = async () => fetch('/api')
await:在 async 函数里暂停执行,等 Promise 完成再继续
await 只能在 async 函数内部使用。它不是阻塞主线程,而是“暂停当前函数的执行”,把控制权交还给事件循环,等 Promise settle(fulfilled 或 rejected)后再恢复。
-
await fetch('/user')等价于fetch('/user').then(...),但不用嵌套 - 如果 await 后面不是 Promise,比如
await 123,它会立即返回 123(不等待) - 如果 Promise 被 reject,且没被 try/catch 捕获,就会抛出错误,中断后续代码
对比 Promise 链,async/await 简化在哪?
以前写多个异步步骤得靠 .then 嵌套或链式调用,容易形成“回调地狱”;现在可以平铺直叙地写:
- Promise 写法:
fetch(...).then(res => res.json()).then(data => console.log(data)) - async/await 写法:
const res = await fetch(...); const data = await res.json(); console.log(data); - 错误处理更集中:
try { ... } catch (e) { ... }替代每个 .catch() - 支持 for 循环、if 判断等同步结构,逻辑更贴近真实业务流
注意几个常见坑
async/await 不是万能银弹,有些地方仍需 Promise 原语:
- 不能在顶层作用域直接写 await(ES2022+ 支持 top-level await,但浏览器兼容性有限)
- 多个请求想并行发,别写成
await a(); await b();(这是串行),改用await Promise.all([a(), b()]) - await 后面必须是 thenable(有 .then 方法的对象),否则会报错
- 忘记加 async 就用 await,会直接 SyntaxError
基本上就这些。用好 async 和 await,核心就两点:函数加 async,异步调用前加 await,再配个 try/catch —— 异步流程就清爽多了。










