async/await的核心优势在于提升异步代码的可读性、错误处理统一性、控制流自然性及调试体验：它使代码平铺展开、支持try/catch集中捕获异常、允许直接使用if/for/while等同步语法，并提供线性调用栈和精准断点调试。
async/await 的核心优势之一，是让异步代码写起来更像同步代码，大幅降低嵌套和链式调用带来的理解成本。相比 Promise.then 链，它在可读性、错误处理和控制流表达上更自然。
写法更接近直觉逻辑
多个异步操作依次执行时，then 链容易形成“右漂”结构，缩进和括号层层嵌套：
Promise 版本（易错、难维护）：
fetch('/api/user')
.then(res => res.json())
.then(user => fetch(`/api/posts?userId=${user.id}`))
.then(res => res.json())
.then(posts => console.log(posts))
.catch(err => console.error('出错了', err));
而 async/await 把步骤平铺展开，每一步都像普通函数调用：
async function loadUserData() {
try {
const res1 = await fetch('/api/user');
const user = await res1.json();
const res2 = await fetch(`/api/posts?userId=${user.id}`);
const posts = await res2.json();
console.log(posts);
} catch (err) {
console.error('出错了', err);
}
}
错误处理统一集中
Promise.then 中，catch 只能捕获前面链中抛出的错误，一旦漏写或位置不对，错误就静默丢失；多个分支还要重复写 catch。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
async/await 直接复用 try/catch，语义清晰，覆盖整个 await 序列：
- 一个
try块就能捕获任意 await 表达式抛出的异常（包括网络失败、JSON 解析错误、业务校验 throw） - 不需要为每个异步步骤单独配
catch，也不用担心catch被跳过 - 可以按需在不同层级加
try/catch，比如只捕获某一步的特定错误
条件与循环控制更自然
在需要根据前一步结果决定是否继续、或多次请求同一接口时，then 链必须靠返回新 Promise 或嵌套来实现，逻辑易断裂。
async/await 允许直接使用 if、for、while 等同步语法：
- 用
if (user.isAdmin)控制是否发起管理接口请求 - 用
for (const id of ids) { await fetch(`/item/${id}`); }顺序加载列表 - 用
while (!data.ready) { await sleep(100); data = await checkStatus(); }实现轮询
调试体验明显提升
浏览器 DevTools 对 async/await 的断点支持更好：可以在任意 await 行设断点，单步执行时暂停在实际等待处；调用栈也保持线性，不像 then 链那样被 Promise 内部调度打散。
这意味着：
- 不用反复跳转到微任务队列里找回调
- 错误堆栈指向真实的 await 行，而非 Promise.then 的匿名函数
- 变量作用域清晰，不需要靠 .then(x => { const a = x; return ... }) 传递中间值
