当前位置：首页 > news >正文

Promise 与 async/await

news 2025/10/18 13:38:32

一、概念定位

对比项	Promise	async / await
本质	一种异步操作的对象封装机制	基于 Promise 的语法糖（更直观写法）
出现版本	ES6 (2015)	ES8 (2017)
主要作用	表示一个未来才会返回结果的异步操作	让异步代码像同步代码那样书写
底层依赖	无（原生实现）	必须依赖 Promise
可读性	相对较差（链式 then）	可读性强（顺序执行）

二、语法差异

🔹使用 Promise 的写法

function getData() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('数据加载完成');}, 1000);});
}getData().then(result => {console.log(result);
}).catch(err => {console.error(err);
});

🔹使用 async / await 的写法

async function loadData() {try {const result = await getData();console.log(result);} catch (err) {console.error(err);}
}loadData();

🔸可以看到：

async/await 写法更像同步流程，逻辑更直观。
但底层其实还是通过 Promise 实现的。

三、核心区别解析

维度	Promise	async / await
写法风格	链式调用 `.then()`	类同步顺序执行
错误处理	`.catch()`	`try...catch`
嵌套复杂度	容易产生链式嵌套	更加扁平易读
控制流	回调链控制	顺序执行（语法上阻塞）
返回值	直接返回 Promise 对象	自动封装为 Promise
执行机制	异步回调	异步 + 微任务队列控制

四、编译层面分析

例如这段 async 代码：

async function example() {const a = await doA();const b = await doB(a);return b;
}

实际上会被 Babel 编译成：

function example() {return new Promise((resolve, reject) => {doA().then(a => doB(a)).then(b => resolve(b)).catch(reject);});
}

也就是说：

async/await 并没有改变 JavaScript 的异步机制，
它只是让异步代码用同步的语法风格写出来。

五、执行机制（Event Loop 层面）

Promise

执行体立即执行；
then() 注册的回调放入 微任务队列（Microtask Queue）；
当前宏任务执行完后才触发 then。

async / await

await 会暂停函数执行；
在内部注册 Promise 回调，等待其 resolve；
resolve 后继续执行函数体；
整个过程仍是异步微任务。

六、混用场景

两者可以混合使用：

async function main() {const data1 = await fetchData1();const data2 = await fetchData2();return Promise.all([data1, data2]); // 并发执行
}

或者：

fetchData1().then(res => fetchData2(res)).then(final => console.log(final))

七、性能与风格对比

对比维度	Promise	async/await
执行性能	一样（同属 Promise 机制）	一样
可维护性	差（链式回调）	好（结构清晰）
并发控制	可使用 `Promise.all()`	需显式并发写法
异常处理	`.catch()`	`try...catch`

八、总结观点

结论	说明
`async/await` 是 Promise 的语法糖	并非新异步模型
两者底层机制一致	都基于微任务队列执行
async/await 代码更易读	更接近同步逻辑
Promise 更灵活	链式并发控制场景更强（如 `Promise.all`）

一句话总结：