一、async/await 核心本质
async/await 不是新功能，是 Promise 的语法糖。
-
async：修饰函数，标记该函数为异步函数，返回值自动包装为 Promise
-
await ：等待 Promise 执行完毕，只能写在 async 函数内部
核心价值：异步任务、同步顺序执行，代码结构和普通同步逻辑完全一致。
二、基础语法使用
// 1. 封装一个 Promise 异步任务 function delay(time, val) { return new Promise((resolve) => { setTimeout(() => { resolve(val); }, time); }); } // 2. async 函数 + await 等待结果 async function fn() { // 阻塞等待 Promise 执行完成，拿到结果 let res1 = await delay(1000, "第一步数据"); console.log(res1); let res2 = await delay(1000, "第二步数据"); console.log(res2); } fn();
执行顺序：从上到下，执行完上一个异步再走下一个，完全同步写法。
三、异步函数返回值特点
任何被 async 修饰的函数，返回结果一定是 Promise 对象。
async function test() { return 666; } // 自动包装成 Promise test().then(res => console.log(res)); // 666
四、异常捕获 try / catch（必学）
await 遇到 Promise 失败（reject）会直接报错、终止代码。必须使用 try/catch 捕获异常。
async function getData() { try { // 成功走这里 let res = await fetch("https://xxx/api"); console.log("请求成功", res); } catch (err) { // 失败、报错走这里 console.log("请求失败", err); } } getData();
工程规范：所有 await 业务代码，必须包裹 try/catch，防止页面逻辑崩掉。
五、串行异步（默认行为）
多个 await 默认 串行执行，上一个结束才执行下一个，适合有依赖顺序的接口。
async function serial() { console.time("串行耗时"); await delay(1000, 1); await delay(1000, 2); await delay(1000, 3); console.timeEnd("串行耗时"); // 总耗时约 3000ms } serial();
六、并行异步（提升性能）
无依赖的异步任务，不要顺序等待！搭配 Promise.all 实现并行执行，大幅提速。
async function parallel() { console.time("并行耗时"); // 先同时开启所有任务 const p1 = delay(1000, 1); const p2 = delay(1000, 2); const p3 = delay(1000, 3); // 统一等待结果 const res = await Promise.all([p1, p2, p3]); console.log(res); console.timeEnd("并行耗时"); // 总耗时约 1000ms } parallel();
七、开发核心注意要点
-
await 必须写在 async 函数内，普通函数直接报错
-
await 只能等待 Promise、不能等待普通值
-
串行有顺序依赖，并行提升性能，根据业务场景选择
-
所有异步请求必须 try/catch，统一异常处理
-
async/await 只是语法糖，底层依旧是 Promise