在现代前端开发中，Promise 是一项非常重要的技术。它可以让我们更加优雅地处理异步操作，并且避免了回调地狱的问题。在 ES6 中，Promise 被正式引入到了 JavaScript 中，成为了语言的一部分。而在 ES7、ES8、ES9 中，Promise 的实现方式也有了一些新的变化。本文将详细介绍 Promise 的新实现方式，并且提供示例代码，帮助读者更好地掌握 Promise 的使用。
Promise 的基本概念
Promise 是一种异步编程的解决方案。它是一个对象，用来表示一个异步操作的最终完成或失败，并且可以返回一个值或者抛出一个异常。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
Promise 对象有两个重要的方法：
then()：用来指定 Promise 成功时的回调函数。catch()：用来指定 Promise 失败时的回调函数。
下面是一个简单的 Promise 示例：
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const result = Math.random();
if (result > 0.5) {
resolve(result);
} else {
reject('error');
}
}, 1000);
});
promise
.then((result) => {
console.log(`success: ${result}`);
})
.catch((error) => {
console.log(`error: ${error}`);
});在上面的代码中，我们创建了一个 Promise 对象，它会在 1 秒钟之后返回一个随机数。如果随机数大于 0.5，Promise 就会进入 fulfilled 状态，并且调用 then() 方法指定的回调函数；否则，Promise 就会进入 rejected 状态，并且调用 catch() 方法指定的回调函数。
Promise 的新实现方式
在 ES6 中，Promise 的实现方式非常简单，只需要通过构造函数来创建一个 Promise 对象即可。但是在 ES7、ES8、ES9 中，Promise 的实现方式有了一些新的变化。
Promise.prototype.finally()
在 ES9 中，Promise 增加了一个新的方法 finally()，它可以在 Promise 结束时无论是成功还是失败都会执行。finally() 方法接收一个回调函数作为参数，这个回调函数不接收任何参数。下面是一个使用 finally() 方法的示例：
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const result = Math.random();
if (result > 0.5) {
resolve(result);
} else {
reject('error');
}
}, 1000);
});
promise
.then((result) => {
console.log(`success: ${result}`);
})
.catch((error) => {
console.log(`error: ${error}`);
})
.finally(() => {
console.log('finally');
});在上面的代码中，我们使用了 finally() 方法，在 Promise 结束时输出了一条信息。
Promise.allSettled()
在 ES2020 中，Promise 增加了一个新的静态方法 allSettled()，它可以接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。这个新的 Promise 对象会在所有的 Promise 都结束时 resolve，不管它们是成功还是失败。返回的结果是一个对象数组，每个对象都有两个属性：status 和 value 或 reason。下面是一个使用 allSettled() 方法的示例：
const promise1 = new Promise((resolve) => {
setTimeout(() => {
resolve(1);
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('error');
}, 2000);
});
const promise3 = new Promise((resolve) => {
setTimeout(() => {
resolve(3);
}, 3000);
});
Promise.allSettled([promise1, promise2, promise3]).then((results) => {
console.log(results);
});在上面的代码中，我们使用了 allSettled() 方法，它接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。在 Promise 数组中，第一个 Promise 会在 1 秒钟之后 resolve，第二个 Promise 会在 2 秒钟之后 reject，第三个 Promise 会在 3 秒钟之后 resolve。当所有的 Promise 都结束时，allSettled() 方法会 resolve，返回一个对象数组，每个对象都有 status 和 value 或 reason 两个属性。
Promise.any()
在 ES2021 中，Promise 增加了一个新的静态方法 any()，它可以接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。这个新的 Promise 对象会在 Promise 数组中任何一个 Promise 成功时 resolve，返回成功的 Promise 的值。如果所有的 Promise 都失败了，那么 any() 方法会返回一个 AggregateError 对象，这个对象包含了所有 Promise 的错误信息。下面是一个使用 any() 方法的示例：
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('error1');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('error2');
}, 2000);
});
const promise3 = new Promise((resolve) => {
setTimeout(() => {
resolve(3);
}, 3000);
});
Promise.any([promise1, promise2, promise3])
.then((result) => {
console.log(result);
})
.catch((error) => {
console.log(error);
});在上面的代码中，我们使用了 any() 方法，它接收一个 Promise 数组作为参数。在 Promise 数组中，第一个 Promise 会在 1 秒钟之后 reject，第二个 Promise 会在 2 秒钟之后 reject，第三个 Promise 会在 3 秒钟之后 resolve。由于第三个 Promise 成功了，所以 any() 方法会 resolve，并且返回第三个 Promise 的值。
总结
本文介绍了 Promise 的基本概念和 ES6、ES7、ES8、ES9 中 Promise 的新实现方式。使用 Promise 可以让我们更加优雅地处理异步操作，并且避免了回调地狱的问题。在 ES7、ES8、ES9 中，Promise 的实现方式也有了一些新的变化，包括 finally()、allSettled() 和 any() 等方法。这些新特性可以让我们更加方便地使用 Promise。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bd9d86add4f0e0ff74dc13