在现代前端开发中，Promise 是一项非常重要的技术。它可以让我们更加优雅地处理异步操作，并且避免了回调地狱的问题。在 ES6 中，Promise 被正式引入到了 JavaScript 中，成为了语言的一部分。而在 ES7、ES8、ES9 中，Promise 的实现方式也有了一些新的变化。本文将详细介绍 Promise 的新实现方式，并且提供示例代码，帮助读者更好地掌握 Promise 的使用。
Promise 的基本概念
Promise 是一种异步编程的解决方案。它是一个对象，用来表示一个异步操作的最终完成或失败，并且可以返回一个值或者抛出一个异常。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
Promise 对象有两个重要的方法：
then()：用来指定 Promise 成功时的回调函数。catch()：用来指定 Promise 失败时的回调函数。
下面是一个简单的 Promise 示例：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
----- ------ - --------------
-- ------- - ---- -
----------------
- ---- -
----------------
-
-- ------
---
-------
-------------- -- -
--------------------- ------------
--
-------------- -- -
------------------- -----------
---在上面的代码中，我们创建了一个 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() 方法的示例：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
----- ------ - --------------
-- ------- - ---- -
----------------
- ---- -
----------------
-
-- ------
---
-------
-------------- -- -
--------------------- ------------
--
-------------- -- -
------------------- -----------
--
----------- -- -
-----------------------
---在上面的代码中，我们使用了 finally() 方法，在 Promise 结束时输出了一条信息。
Promise.allSettled()
在 ES2020 中，Promise 增加了一个新的静态方法 allSettled()，它可以接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。这个新的 Promise 对象会在所有的 Promise 都结束时 resolve，不管它们是成功还是失败。返回的结果是一个对象数组，每个对象都有两个属性：status 和 value 或 reason。下面是一个使用 allSettled() 方法的示例：
-- -------------------- ---- -------
----- -------- - --- ----------------- -- -
------------- -- -
-----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
----- -------- - --- ----------------- -- -
------------- -- -
-----------
-- ------
---
----------------------------- --------- ------------------------- -- -
---------------------
---在上面的代码中，我们使用了 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() 方法的示例：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
-----------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
-----------------
-- ------
---
----- -------- - --- ----------------- -- -
------------- -- -
-----------
-- ------
---
---------------------- --------- ----------
-------------- -- -
--------------------
--
-------------- -- -
-------------------
---在上面的代码中，我们使用了 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