一、Pending 状态
Pending 状态是 Promise 对象在“等待中”的状态,意味着传入 Promise 构造函数中的异步操作还没有完成。下面是一个示例:
const promise = new Promise((resolve, reject) => { console.log('Promise is pending'); setTimeout(() => { resolve('Promise is resolved'); }, 3000); });
在上述代码中,Promise 对象被创建并传入了一个异步操作,在 setTimeout 函数内部执行 resolve() 方法表示异步操作已经完成。在这种情况下,Promise 的状态为 Pending。
当状态为 Pending 时,Promise 对象可以将状态变成它的任意一个终态,即 Fulfilled 或 Rejected 状态。
二、Fulfilled 状态
Fulfilled 状态表示异步操作成功。当 Promise 状态变成 Fulfilled 时,Promise 对象会执行 .then() 回调函数中的内容。下面是一个示例:
const promise = new Promise((resolve, reject) => { console.log('Promise is pending'); setTimeout(() => { resolve('Promise is resolved'); }, 3000); }); promise.then((value) => { console.log(value); });
在上述代码中,Promise 对象的异步操作成功并执行了 resolve() 方法。因此,Promise 对象状态变为了 Fulfilled 状态,并且异步操作结果作为参数传递给了 .then() 回调函数。在这种情况下,.then() 回调函数输出 "Promise is resolved"。
需要注意的是,Promise 对象只能变成 Fulfilled 或者 Rejected 状态中的一个。如果 Promise 对象的异步操作同时满足 Fulfilled 和 Rejected 状态,那么 Promise 对象将会失败,即 Rejected 状态。
三、Rejected 状态
Rejected 状态表示异步操作失败。当 Promise 状态变成 Rejected 时,Promise 对象会执行 .catch() 回调函数中的内容。下面是一个示例:
const promise = new Promise((resolve, reject) => { console.log('Promise is pending'); setTimeout(() => { reject('Promise is rejected'); }, 3000); }); promise.catch((error) => { console.log(error); });
在上述代码中,Promise 对象的异步操作失败并执行了 reject() 方法。因此,Promise 对象状态变为了 Rejected 状态,并且异步操作结果作为参数传递给了 .catch() 回调函数。在这种情况下,.catch() 回调函数输出 "Promise is rejected"。
需要注意的是,同样地,Promise 对象在 Reject 状态下也无法变成其他状态。
四、状态改变的流程
Promise 对象的状态变化是一个单向性的过程,即状态只能从 Pending 转变为 Fulfilled 或 Rejected。在下面的示例中,定义了两个 Promise 对象,promise1 和 promise2:
const promise1 = new Promise((resolve, reject) => { console.log('Promise 1 is pending'); setTimeout(() => { resolve('Promise 1 is resolved'); }, 3000); }); const promise2 = new Promise((resolve, reject) => { console.log('Promise 2 is pending'); setTimeout(() => { reject('Promise 2 is rejected'); }, 1000); }); promise1 .then((value) => { console.log(value); return promise2; }) .catch((error) => { console.log(error); }) .then((value) => { console.log(value); }, (error) => { console.log(error); });
在上述代码中,promise1 和 promise2 分别表示异步操作成功和失败的情况。promise1 的异步操作成功,promise2 的异步操作失败。在 promise1 的 .then() 回调函数中,将 promise2 传递给了 .catch() 回调函数,并继续返回一个全新的 Promise 对象。在这里,promise2 的状态已经为 Rejected,因此会执行 .catch() 回调函数。在 .then() 回调函数的第二个参数和 .catch() 回调函数中,均可以接收到 promise2 的结果。在这种情况下,输出结果为 "Promise 1 is resolved" 和 "Promise 2 is rejected"。
五、Promise.all()
Promise.all() 方法接收一个由 Promise 对象组成的数组作为参数,并将其包装成一个新的 Promise 对象。这个方法返回的 Promise 对象只有一个 then() 方法。在参数中的所有 Promise 对象均成功后,返回该对象的结果数组。
下面是一个使用 Promise.all() 方法的示例:
const promise1 = new Promise((resolve, reject) => { console.log('Promise 1 is pending'); setTimeout(() => { resolve('Promise 1 is resolved'); }, 3000); }); const promise2 = new Promise((resolve, reject) => { console.log('Promise 2 is pending'); setTimeout(() => { resolve('Promise 2 is resolved'); }, 1000); }); Promise.all([promise1, promise2]) .then((values) => { console.log(values); // ["Promise 1 is resolved", "Promise 2 is resolved"] });
在上述代码中,Promise.all() 方法接收 promise1 和 promise2 两个 Promise 对象组成的数组,并通过 .then() 回调函数输出结果数组 ["Promise 1 is resolved", "Promise 2 is resolved"]。需要注意的是,只要有一个 Promise 对象的状态为 Rejected,Promise.all() 方法返回的 Promise 对象即为 Rejected 状态。