Promise和Async/Await是解决JavaScript异步编程问题的核心工具。Promise通过resolve/reject控制异步状态，支持链式调用与错误捕获；Async/Await以同步语法处理异步逻辑，提升可读性。实战中应合理使用Promise.all()进行并发控制，避免滥用await，并始终结合try/catch处理异常，确保代码健壮性。
JavaScript的异步编程是前端开发中的核心技能之一。面对回调地狱、代码可读性差等问题，Promise 和 Async/Await 成为现代JS处理异步操作的标准方式。下面通过实战角度，带你掌握它们的核心用法和最佳实践。
Promise：解决回调嵌套的基础工具
Promise 是一个代表异步操作最终完成或失败的对象。它有三种状态：pending（等待）、fulfilled（成功）、rejected（失败）。
常见使用场景包括封装 AJAX 请求、定时任务等：
const fetchData = () => {
return new Promise((resolve, reject) => {
const success = true; // 模拟请求是否成功
setTimeout(() => {
if (success) {
resolve("数据获取成功");
} else {
reject("请求失败");
}
}, 1000);
});
};
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));
关键点：
立即学习“Java免费学习笔记（深入）”；
- Promise 构造函数接收一个执行函数，该函数有两个参数：resolve 和 reject
- 使用 .then() 处理成功结果，.catch() 捕获错误
- 可以链式调用多个 .then，前一个返回值会传递给下一个
- Promise.all() 可并行执行多个异步任务，全部成功才成功
Async/Await：更优雅的异步写法
async/await 是基于 Promise 的语法糖，让异步代码看起来像同步代码，极大提升可读性。
const getData = async () => {
try {
const result = await fetchData();
console.log(result); // 输出：数据获取成功
return result;
} catch (error) {
console.error("捕获异常:", error);
}
};
getData();
要点说明：
- async 函数自动返回 Promise
- await 只能在 async 函数内部使用，用于“等待”Promise 完成
- 使用 try/catch 捕获 await 中的错误，比 .catch() 更直观
- 多个 await 会按顺序执行，适合串行依赖逻辑
实战技巧与注意事项
在真实项目中，合理使用才能发挥最大价值。
- 避免滥用 await：如果几个异步任务无依赖关系，用 Promise.all() 并行执行更高效
- 始终处理异常：未捕获的 Promise 错误会静默失败，建议 async 函数内包裹 try/catch
- 结合解构赋值简化代码，例如从接口取数据时直接结构响应体
- 在循环中使用 await 要小心，for...of 配合 await 可控制流程，而 forEach 不支持 await
常见误区澄清
初学者容易误解的地方：
- await 并不会阻塞整个程序，只是暂停所在 async 函数的执行
- 不是所有异步操作都必须用 async/await，简单场景用 .then() 更简洁
- 箭头函数也可以加 async，如 const fn = async () => {}
基本上就这些。掌握 Promise 和 Async/Await 的本质与协作机制，能让你写出更清晰、健壮的异步代码。不复杂但容易忽略的是错误处理和并发控制，实战中多留意这两点。
