什么是 Promise
在 JavaScript 中,异步编程是非常常见的,而 Promise 是其中一种处理异步操作的方式。Promise 对象表示一个尚未完成但即将完成的操作,它提供了一种替代回调函数的方式,能更好地处理异步代码的逻辑。Promise 使得异步代码看起来更像同步代码,从而提升了代码的可读性和可维护性。
Promise 的特点
-
Pending(待定): 初始状态,既没有被兑现(Fulfilled),也没有被拒绝(Rejected)。
-
Fulfilled(已兑现): 操作成功完成,并且有一个结果值。
-
Rejected(已拒绝): 操作失败,并且有一个拒绝理由。
Promise 的基本用法
Promise 的核心在于它通过链式调用 .then()
和 .catch()
方法,使得处理异步操作更加直观和简洁。
const promise = new Promise((resolve, reject) => {
const success = true;
if (success) {
resolve("操作成功");
} else {
reject("操作失败");
}
});
promise.then(result => {
console.log(result); // 操作成功
}).catch(error => {
console.error(error); // 如果失败,输出操作失败
});
创建 Promise 对象
你可以通过 new Promise()
的方式来创建一个 Promise 对象,构造函数接收一个执行器函数,该函数包含两个参数:resolve
和 reject
。在执行器函数内,你可以根据条件调用 resolve()
传递成功值,或调用 reject()
传递错误信息。
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("数据加载成功");
}, 2000);
});
then
方法
then()
方法是 Promise 最基本的用法,它用于在 Promise 成功兑现时执行某个操作。它接收两个参数,第一个是处理成功的回调,第二个是处理失败的回调。
myPromise.then(result => {
console.log(result); // 数据加载成功
});
resolve/reject
resolve()
和 reject()
是 Promise 内部用来处理状态的两个方法。resolve()
表示异步操作成功,并将结果传递出去,而 reject()
则表示异步操作失败,并传递错误信息。
const promise = new Promise((resolve, reject) => {
if (true) {
resolve("成功");
} else {
reject("失败");
}
});
catch
方法
catch()
方法用于处理 Promise 的拒绝状态,相当于 then(null, rejection)
。如果 Promise 链中的任何一个环节出现错误,它会被捕获并传递到 catch()
中。
promise.catch(error => {
console.error("捕获到错误:", error);
});
常用方法
Promise.all()
Promise.all()
方法接收一个 Promise 的数组,并返回一个新的 Promise。当所有 Promise 都成功时,它才会被兑现,并返回一个数组包含每个 Promise 的结果;如果有任何一个 Promise 被拒绝,它会立即被拒绝,并返回该 Promise 的拒绝值。
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values); // [3, 42, "foo"]
});
Promise.allSettled()
Promise.allSettled()
方法接收一个 Promise 的数组,返回一个新的 Promise,当所有 Promise 都已完成
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, '错误'));
Promise.allSettled([promise1, promise2]).then((results) =>
results.forEach((result) => console.log(result.status))
);
// "fulfilled", "rejected"
(无论成功或失败)时,它会被兑现,并返回每个 Promise 的结果和状态。
Promise.race()
Promise.race()
方法接收一个 Promise 的数组,并返回一个新的 Promise,一旦其中的一个 Promise 兑现或拒绝,这个新的 Promise 就会以相同的值兑现或拒绝。
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, "第一个完成");
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "第二个完成");
});
Promise.race([promise1, promise2]).then((result) => {
console.log(result); // 第二个完成
});
Promise.any()
Promise.any()
方法接收一个 Promise 的数组,并返回一个新的 Promise。一旦其中的一个 Promise 成功兑现,它就会以那个值兑现;如果所有 Promise 都被拒绝,则返回拒绝。
const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, '快速'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, '慢速'));
Promise.any([promise1, promise2, promise3]).then((value) => {
console.log(value); // "快速"
});
Promise.finally()
finally()
方法添加了一个回调函数,在 Promise 被兑现或拒绝后,无论结果如何,都会执行这个回调函数。它常用于清理操作,比如关闭连接或销毁对象。
promise.finally(() => {
console.log("清理操作");
});
结语
Promise 是 JavaScript 异步编程的重要工具,它大大简化了异步操作的处理。通过了解 Promise 的基本用法及其常用方法,你可以更好地编写清晰、易于维护的异步代码。在实际开发中,掌握并熟练运用这些方法将帮助你处理复杂的异步逻辑,提升代码的健壮性和可读性。