Promise是JavaScript中管理异步操作的对象,代表未来完成或失败的结果;具有pending、fulfilled、rejected三种状态;支持链式调用、避免回调地狱,并可通过async/await语法糖简化异步代码。

Promise 是 JavaScript 中用于管理异步操作的对象,它代表一个**尚未完成但未来会完成(或失败)**的操作结果。相比传统回调函数,Promise 提供了更清晰、可链式调用、更易错误处理的异步编程方式,能有效避免“回调地狱”。
Promise 的基本状态和构造
每个 Promise 实例有三种状态:
- pending(进行中):初始状态,既没成功也没失败
-
fulfilled(已成功):操作完成,可通过
.then()获取结果 -
rejected(已失败):操作出错,可通过
.catch()或.then(null, handler)捕获
创建 Promise 使用 new Promise((resolve, reject) => {...}),内部执行异步任务,根据结果调用 resolve(value) 或 reject(error)。
用 .then() 和 .catch() 链式处理异步流程
Promise 的核心优势在于可链式调用,每次 .then() 返回一个新的 Promise,让多个异步步骤自然串联:
立即学习“Java免费学习笔记(深入)”;
fetch('/api/user')
.then(response => response.json())
.then(user => fetch(`/api/posts?userId=${user.id}`))
.then(response => response.json())
.then(posts => console.log(posts))
.catch(err => console.error('出错了:', err));
注意:.then() 中返回普通值会自动包装成 fulfilled Promise;返回另一个 Promise 则等待它完成后再进入下一个 .then()。
并行与串行:Promise.all() 和 Promise.allSettled()
需要同时发起多个请求并等全部完成时,用 Promise.all():
-
Promise.all([p1, p2, p3]):全部成功才 resolve,任一 rejected 就立即 reject -
Promise.allSettled([p1, p2, p3]):不管成功失败都等全部结束,返回每项结果对象(含 status、value 或 reason)
例如获取用户信息和头像并行加载:
Promise.all([
fetch('/api/user').then(r => r.json()),
fetch('/api/avatar').then(r => r.blob())
]).then(([user, avatar]) => {
renderProfile(user, avatar);
});
用 async/await 让异步代码像同步一样写
async/await 是 Promise 的语法糖,让异步逻辑更直观、更易读、更易调试:
async function loadUserProfile() {
try {
const userRes = await fetch('/api/user');
const user = await userRes.json();
const postRes = await fetch(`/api/posts?userId=${user.id}`);
const posts = await postRes.json();
return { user, posts };
} catch (err) {
console.error('加载失败:', err);
}
}
注意:await 只能在 async 函数内使用;它会暂停当前函数执行,但不阻塞主线程;await 后面可以是 Promise 或任意值(非 Promise 会自动转为 resolved)。
为什么能避免回调地狱?
回调地狱指多层嵌套回调导致代码向右偏移、难以维护,比如:
getData(function(a) {
getMoreData(a, function(b) {
getEvenMoreData(b, function(c) {
console.log(c);
});
});
});
用 Promise 改写后结构扁平、逻辑线性:
getData() .then(a => getMoreData(a)) .then(b => getEvenMoreData(b)) .then(c => console.log(c)) .catch(err => console.error(err));
再配合 async/await,几乎看不出异步痕迹,错误也能统一用 try/catch 处理。











