Promise和Async/Await是JavaScript异步编程的核心，Promise通过状态管理解决回调地狱，Async/Await以同步语法提升代码可读性，二者结合try/catch实现优雅的错误处理，适用于串行、并行及重试等场景。
JavaScript中的异步编程是处理非阻塞操作的核心机制，尤其在处理网络请求、文件读写或定时任务时尤为重要。随着语言的发展，从回调函数到Promise，再到Async/Await，异步编程越来越简洁、可读性更强。本文将聚焦于Promise与Async/Await的实战应用，帮助你真正掌握它们的使用方式和底层逻辑。
Promise：解决回调地狱的基础工具
Promise代表一个异步操作的最终完成或失败，它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦状态改变，就不会再变，这避免了回调函数多次执行的问题。
创建一个Promise的基本语法如下：
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
const success = true;
if (success) {
resolve("数据获取成功");
} else {
reject("数据获取失败");
}
}, 1000);
});
使用.then()处理成功结果，.catch()处理失败：
立即学习“Java免费学习笔记（深入）”；
fetchData .then(result => console.log(result)) .catch(error => console.error(error));
实际开发中，我们更常封装异步操作为返回Promise的函数：
function getUser(id) {
return new Promise((resolve, reject) => {
// 模拟API请求
setTimeout(() => {
if (id > 0) {
resolve({ id, name: "张三" });
} else {
reject("用户不存在");
}
}, 800);
});
}
链式调用让多个异步操作有序执行：
getUser(1)
.then(user => {
console.log(user);
return user.id;
})
.then(id => console.log("ID:", id))
.catch(err => console.error(err));
Async/Await：让异步代码像同步一样清晰
Async/Await是基于Promise的语法糖，使异步代码看起来更接近同步写法，极大提升可读性和维护性。
在函数前加上async关键字，该函数就会自动返回一个Promise。函数内部可以使用await等待Promise解析。
async function displayUser(id) {
try {
const user = await getUser(id);
console.log("用户信息:", user);
return user;
} catch (error) {
console.error("出错了:", error);
}
}
displayUser(1);
对比传统的Promise链式调用，async/await结构更直观，错误处理也更集中，使用try/catch即可捕获异常。
常见使用场景包括：
- 连续请求多个API（如先登录再获取用户信息）
- 并行执行多个独立请求，使用Promise.all
- 条件性地执行异步逻辑
例如，并行获取多个资源：
async function loadAllData() {
try {
const [user, posts, profile] = await Promise.all([
getUser(1),
fetch('/api/posts').then(res => res.json()),
fetch('/api/profile').then(res => res.json())
]);
console.log({ user, posts, profile });
} catch (error) {
console.error("加载失败:", error);
}
}
错误处理的最佳实践
在使用Promise时，别忘了链式调用中的.catch()，否则错误会被静默吞掉。而使用async/await时，务必配合try/catch。
也可以将await与Promise.catch结合，避免层层嵌套：
async function safeFetchUser(id) {
const user = await getUser(id).catch(err => {
console.error("获取用户失败:", err);
return null;
});
if (!user) return;
console.log("用户:", user);
}
对于需要重试的场景，可以封装带重试机制的异步函数：
async function retry(fn, retries = 3) {
for (let i = 0; i < retries; i++) {
try {
return await fn();
} catch (error) {
if (i === retries - 1) throw error;
console.log(`重试第 ${i + 1} 次...`);
}
}
}
// 使用示例
retry(() => getUser(-1), 3).catch(console.error);
基本上就这些。掌握Promise和Async/Await的核心模式，能让你写出更健壮、易读的异步代码。关键在于理解Promise的状态机制，并熟练运用await简化流程控制。不复杂但容易忽略的是错误处理和边界情况的兜底。
