Async/Await 与 Promise 的深度解析
一、基本概念
1. Promise
Promise 是 ES6 引入的异步编程解决方案，表示一个异步操作的最终完成（或失败）及其结果值。
function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => resolve('数据获取成功'), 1000);});
}fetchData().then(data => console.log(data)).catch(error => console.error(error));
2. Async/Await
Async/Await 是 ES2017 (ES8) 引入的语法糖，基于 Promise 的更高层抽象，使异步代码看起来像同步代码。
async function getData() {try {const data = await fetchData();console.log(data);} catch (error) {console.error(error);}
}
二、核心区别
| 特性 | Promise | Async/Await |
|---|---|---|
| 代码结构 | 链式调用（.then().catch()） | 同步写法（try-catch 块） |
| 可读性 | 嵌套多时较难阅读 | 线性执行，更易理解 |
| 调试 | 调试.then()链较困难 | 可以像同步代码一样调试 |
| 错误处理 | 必须使用.catch() | 可以使用try-catch |
| 返回值 | 总是返回Promise | async函数返回Promise |
| 流程控制 | 需要手动链接多个Promise | 可以用普通控制结构（for, if等） |
三、Async/Await 的优势
1. 代码更简洁直观
// Promise方式
function getUserAndPosts(userId) {return fetchUser(userId).then(user => fetchPosts(user.id)).then(posts => console.log(posts)).catch(error => console.error(error));
}// Async/Await方式
async function getUserAndPosts(userId) {try {const user = await fetchUser(userId);const posts = await fetchPosts(user.id);console.log(posts);} catch (error) {console.error(error);}
}
2. 更自然的错误处
// 传统Promise错误处理可能遗漏
fetchData().then(data => process(data))// 忘记添加catch会导致静默失败// Async/Await强制更安全的写法
async function safeFetch() {try {const data = await fetchData();return process(data);} catch (error) {console.error('处理失败:', error);throw error; // 可选择重新抛出}
}
3. 更简单的流程控制
// 顺序执行多个异步操作
async function sequentialOps() {const result1 = await operation1();const result2 = await operation2(result1);return operation3(result2);
}// 条件执行
async function conditionalOp(shouldFetch) {if (shouldFetch) {return await fetchData();}return cachedData();
}// 循环中的异步操作
async function processItems(items) {for (const item of items) {await processItem(item); // 顺序处理}
}
四、使用注意事项
1. 常见误区
// 错误1：忘记await
async function oops() {const data = fetchData(); // 缺少await，data将是Promise对象console.log(data); // 输出Promise而非结果
}// 错误2：过度顺序化
async function slowOps() {const a = await getA(); // 等待const b = await getB(); // 继续等待（如果无依赖关系应该并行）// 应该改为：// const [a, b] = await Promise.all([getA(), getB()]);
}
2. 性能优化
// 并行执行独立操作
async function parallelOps() {const [user, posts] = await Promise.all([fetchUser(),fetchPosts()]);return { user, posts };
}
3. 顶层Await
ES2022 支持在模块顶层使用 await：
// module.js const data = await fetchData(); export default data;
五、如何选择
-
使用Async/Await当：
-
需要顺序执行多个异步操作
-
需要更清晰的错误处理
-
代码可读性是首要考虑
-
-
使用Promise当：
-
需要更精细的控制流（如同时触发多个操作）
-
需要直接操作Promise（如Promise.race）
-
在不能使用async/await的环境（如某些旧浏览器）
-
六、实际应用示例
1. API请求处理
async function fetchUserWithPosts(userId) {try {const user = await api.get(`/users/${userId}`);const posts = await api.get(`/users/${userId}/posts`);return { ...user, posts };} catch (error) {if (error.response?.status === 404) {throw new Error('用户不存在');}throw error;}
}
2. 数据库事务
async function transferFunds(senderId, receiverId, amount) {const connection = await db.getConnection();try {await connection.beginTransaction();await connection.query('UPDATE accounts SET balance = balance - ? WHERE id = ?',[amount, senderId]);await connection.query('UPDATE accounts SET balance = balance + ? WHERE id = ?',[amount, receiverId]);await connection.commit();} catch (error) {await connection.rollback();throw error;} finally {connection.release();}
}
Async/Await 不是替代 Promise 的技术，而是基于 Promise 的更优雅的语法糖。理解两者关系后，可以根据场景灵活选择或混合使用。
