JavaScript异步编程历经回调函数、Promise到async/await的演进。Promise通过resolve/reject处理异步结果，避免回调地狱，支持链式调用；async/await基于Promise，使异步代码更像同步，提升可读性，配合try/catch实现优雅错误处理。实际开发中常用Promise封装API请求，利用Promise.all()实现并行任务，提升性能，并结合catch实现局部错误捕获。掌握这些技术可显著提高异步代码质量与维护性。
JavaScript中的异步编程是前端开发的核心技能之一，尤其在处理网络请求、文件读写或定时任务时必不可少。随着语言的发展，从回调函数到Promise，再到async/await，异步处理方式不断演进，让代码更清晰、易维护。
Promise：解决回调地狱的基础工具
传统的回调函数容易导致“回调地狱”——多层嵌套使代码难以阅读和调试。Promise的出现解决了这个问题，它表示一个异步操作的最终完成或失败。
创建一个Promise非常简单：
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true;
if (success) {
resolve("数据获取成功");
} else {
reject("请求失败");
}
}, 1000);
});
};
使用 .then() 处理成功结果，.catch() 捕获错误：
立即学习“Java免费学习笔记（深入）”；
fetchData() .then(data => console.log(data)) .catch(error => console.error(error));
Promise还支持链式调用，适合多个异步任务依次执行：
fetchData()
.then(step1)
.then(step2)
.then(step3)
.catch(err => console.log("出错啦：", err));
async/await：让异步代码像同步一样 readable
async/await 是基于Promise的语法糖，可以让异步代码看起来像同步代码，极大提升可读性。
只要在函数前加上 async，就可以在其中使用 await 等待Promise完成：
const handleData = async () => {
try {
const result1 = await fetchData();
console.log(result1);
const result2 = await anotherAsyncTask();
console.log(result2);
} catch (error) {
console.error("捕获异常：", error);
}
};
注意：await 只能在 async 函数内部使用。错误通过 try/catch 捕获，比链式调用更直观。
实战场景：封装API请求
在实际项目中，常需要封装HTTP请求。结合Promise和async/await，可以写出清晰的接口调用逻辑。
// 模拟一个API请求
const apiCall = (url) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (url) {
resolve({ code: 200, data: `来自${url}的数据` });
} else {
reject({ code: 500, message: "URL不能为空" });
}
}, 800);
});
};
// 使用async/await调用
const getData = async () => {
try {
const res = await apiCall("/users");
console.log(res.data);
} catch (err) {
console.error("请求出错：", err.message);
}
};
并行执行与错误处理技巧
当需要同时发起多个请求时，可以用 Promise.all() 提高性能：
const parallelTasks = async () => {
try {
const [res1, res2] = await Promise.all([
apiCall("/users"),
apiCall("/posts")
]);
console.log(res1.data, res2.data);
} catch (error) {
console.error("任一请求失败即触发catch");
}
};
如果希望即使某个请求失败也不中断其他请求，可配合 .catch() 局部捕获：
const [res1, res2] = await Promise.all([
apiCall("/users").catch(err => err),
apiCall("/wrong").catch(err => err)
]);
基本上就这些。掌握Promise和async/await，不仅能写出健壮的异步逻辑，还能显著提升代码质量。关键在于理解Promise的状态机制，并熟练运用async函数中的错误控制。不复杂但容易忽略。
