什么是 Promise？
Promise 是一种处理异步操作的方法，它代表了某个未来才会结束的事件（通常是一个异步操作）的结果。Promise 可以被看作是一个容器，里面可以保存着这个异步操作得到的最终结果或失败原因。Promise 提供了一种更加清晰和可控的方式来处理异步代码，避免了回调地狱。
Promise 的状态
一个 Promise 对象有以下三种状态：
- Pending（进行中）：初始状态，既不是成功，也不是失败。
- Fulfilled（已成功）：操作成功完成。
- Rejected（已失败）：操作失败。
一旦进入成功或失败状态后，它就不会再改变状态了。
创建一个 Promise
创建一个 Promise 实例时，需要传递一个带有 resolve 和 reject 参数的函数给构造器。当异步操作成功时，调用 resolve 函数；当异步操作失败时，调用 reject 函数。
// www.javascriptcn.com code example
const myFirstPromise = new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
const success = true; // 模拟异步操作的结果
if (success) {
resolve("成功!"); // 成功
} else {
reject("失败!"); // 失败
}
}, 3000);
});使用 Promise
.then() 方法
.then() 方法用于指定 Promise 成功后的回调函数。可以链式调用 .then() 方法来处理 Promise 链。
myFirstPromise.then(
(message) => {
console.log(message); // 输出: "成功!"
},
(error) => {
console.error(error); // 如果有错误，则会执行这里
}
);.catch() 方法
.catch() 方法用于指定 Promise 失败后的回调函数。它等价于 .then(null, rejection)。
myFirstPromise.catch((error) => {
console.error(error); // 输出: "失败!"
});Promise 链
通过链式调用 .then() 方法，可以将多个异步操作串联起来。每个 .then() 方法返回一个新的 Promise 对象，下一个 .then() 将在这个新的 Promise 上运行。
// www.javascriptcn.com code example
myFirstPromise
.then((result) => {
console.log(result);
return "第二阶段成功!";
})
.then((result) => {
console.log(result);
})
.catch((error) => {
console.error(error);
});Promise.all()
Promise.all() 方法接收一个 Promise 数组作为参数，当所有的 Promise 都成功完成时，才会执行其回调函数。如果任何一个 Promise 被拒绝，那么整个 Promise 链都会被拒绝，并且执行第一个被拒绝的 Promise 的回调。
// www.javascriptcn.com code example
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.race()
Promise.race() 方法接收一个 Promise 数组作为参数，它将返回一个在任意一个 Promise 解析或拒绝时解析或拒绝的新 Promise。
// www.javascriptcn.com code example
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, "one");
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "two");
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value); // 输出: "two"
});总结
Promise 是处理异步操作的重要工具，能够帮助我们更清晰地组织代码结构，提高代码的可读性和可维护性。通过使用 Promise，我们可以避免嵌套的回调函数，从而使得代码更加简洁和易于理解。掌握 Promise 的基本概念和使用方法对于任何前端开发者来说都是非常重要的。