怎么说呢，

一、async/await 主要简介

async/await 是 ES7 推出的异步语法糖。基于 Promise 封装，解决掉了传统 Promise 链式调用代码嵌套层级深、可读性差、维护困难的「回调地狱」问题。

该语法可以让异步代码像同步代码一样自上而下顺序执行逻辑清晰、调试简单，是 Vue 项目接口请求、异步逻辑处理的主流规范写法。其实，

主要语法规则

• async修饰函数，写在函数定义前，标识该函数为异步函数返回值为 Promise 对象
• await修饰异步操作，只能在 async 函数内部使用作用是阻塞代码。等待异步请求执行完成后再执行后续代码
• 异常捕获await 异步报错无法直接捕获，必须搭配 try/catch 捕获异常

二、传统 Promise 链式调用

传统 Promise 的 n 链式调用会出现多层嵌套，代码冗余、层级混乱、极难维护。

从业务场景来看，先通过手机号获取使用者属地。再根据属地省市信息请求充值面额列表

methods: { // 获取使用者所属属地 getLocation { return axios.post;},// 根据属地省市获取充值面额列表 getFaceList { return axios.post;},// 传统Promise链式调用 getFaceResult { this.getLocation.n { let province = res.data.province;let city = res.data.city;// 二次嵌套调用，层级堆积 this.getFaceList.n { this.faceList = res.data } }) } }).catch }) }}

传统写法痛点多接口串行嵌套、代码层级深、逻辑割裂、异常处理集中、后续 难度大。

三、async/await 标准优雅写法

使用 async/await 重构后异步逻辑完全同步化代码扁平化无嵌套，执行顺序一目了然完美适配接口串行依赖场景。

methods: { // 获取使用者所属属地 getLocation { return axios.post;},// let location = await this.getLocation;// 上一个接口执行完毕，才会执行后续逻辑 if { let province = location.data.province;
let city = location.data.city;
怎么说呢，// 等待第二个依赖接口执行完成 let result = await this.getFaceList;if { this.faceList = result.data;} } } catch { // 统一处理所有异步异常 console.log;} }}

四、主要执行逻辑解析

1. 给函数添加 async 修饰。将普通函数转为异步函数，支持内部使用 await；
2. await 强制阻塞代码执行，等待 getLocation 接口请求完毕、返回结果后才会向下执行；
3. 解析第一个接口返回的省市数据，作为第二个接口的请求参数；不过，
4. 通过 await 等待 getFaceList 接口执行完成。最终赋值渲染数据，
5. 所有异步请求的报错、异常。全部被 try/catch 统一捕获，避免页面报错崩溃。

五、async/await 关键使用规则

• await 必须在 async 函数内部使用普通函数内直接使用 await 会报语法错误；
• await 默认串行执行代码自上而下依次执行，天然适配接口依赖场景；
• 必须搭配 try/catchPromise 链式可单独 catch。await 异步异常无法自动捕获，不加 try/catch 会导致程序报错中断；
• async 函数始终返回 Promise 对象。可正常搭配 n 继续链式调用，兼容性极强；
• 无依赖的并行接口不建议串行 await，会造成不必要的请求耗时。

六、主要优势

• 代码扁平化彻底消除回调嵌套،告别回调地狱،代码整洁优雅；
• 逻辑更清晰异步代码同步化写法،执行顺序直观،可读性明显提高；
• 维护性更强新增،删减异步逻辑无需调整嵌套层级،迭代成本低；说起来，
• 异常统一处理通过 try/catch 集中捕获所有异步异常،报错管理更规范。

七、场景选型

接口串行依赖、多步骤异步逻辑

• 优先使用 async/await；

简单单次异步请求

• 可使用简易 Promise n 写法；

无依赖并行请求

• 搭配 Promise.all + async/await 实现最优性能。