JavaScript异步编程核心是Promise和Async/Await。1. Promise解决回调地狱,有pending、fulfilled、rejected三种状态,通过then/catch链式调用;2. Async/Await基于Promise,用同步语法写异步代码,需配合try/catch处理错误;3. 实际使用中,Promise.all用于并发请求,Promise.race/any获取最快结果,建议始终用try/catch捕获异常,确保代码健壮性。

JavaScript 是单线程语言,为了不阻塞主线程,异步编程是处理耗时操作(如网络请求、文件读取)的核心机制。随着语言的发展,Promise 和 Async/Await 极大地提升了异步代码的可读性和可维护性。掌握它们是现代前端开发的必备技能。
理解 Promise:解决回调地狱的基础
在 ES6 之前,异步操作依赖回调函数,多层嵌套容易形成“回调地狱”,代码难以维护。Promise 的出现让异步逻辑更清晰。
Promise 是一个对象,表示异步操作的最终完成或失败。它有三种状态:
- pending:初始状态,既未成功也未失败
- fulfilled:操作成功完成
- rejected:操作失败
一旦状态改变,就不会再变,这保证了可靠性。
立即学习“Java免费学习笔记(深入)”;
创建一个 Promise 示例:
const fetchData = new Promise((resolve, reject) => {if (/* 操作成功 */) {
resolve("数据获取成功");
} else {
reject("请求失败");
}
});
fetchData
.then(result => console.log(result))
.catch(error => console.error(error));
使用 then 处理成功,catch 处理失败。链式调用还能实现多个异步操作顺序执行:
fetchData.then(step1)
.then(step2)
.then(step3)
.catch(err => console.log("出错:", err));
Async/Await:让异步代码像同步一样直观
Async/Await 是基于 Promise 的语法糖,使代码更简洁、更易理解。函数前加上 async,内部可用 await 等待 Promise 完成。
基本写法:
async function getData() {try {
const response = await fetch('/api/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error("请求异常:", error);
}
}
getData();
优点很明显:避免了层层 then,错误统一用 try/catch 捕获,逻辑更线性。
注意:await 只能在 async 函数 内部使用,否则会报错。
常见使用场景与最佳实践
实际开发中,结合 Promise 和 Async/Await 能高效处理各种异步任务。
比如并发请求,可以用 Promise.all 等待多个请求全部完成:
async function loadAllData() {try {
const [users, posts, comments] = await Promise.all([
fetch('/api/users').then(res => res.json()),
fetch('/api/posts').then(res => res.json()),
fetch('/api/comments').then(res => res.json())
]);
return { users, posts, comments };
} catch (error) {
console.error("加载失败:", error);
}
}
如果只关心最快的结果,可用 Promise.race 或 Promise.any,按需选择。
错误处理建议始终使用 try/catch 包裹 await 语句,避免未捕获的 Promise rejection。
基本上就这些。Promise 奠定了现代异步结构,Async/Await 让写法更优雅。两者结合,能写出清晰、健壮的异步代码。











