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() 捕获错误：
立即进入“豆包AI人工智官网入口”；
立即学习“豆包AI人工智能在线问答入口”；
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函数中的错误控制。不复杂但容易忽略。