什么是 Promise
Promise 是异步编程的一种解决方案，它可以让我们更好地处理异步操作。传统的异步编程方式往往是回调函数，但是回调函数的嵌套会导致代码的可读性和可维护性变得非常差，而 Promise 能够解决这个问题。
简单来说，Promise 可以把异步操作封装成一个对象，这个对象有三种状态：Pending、Fulfilled 和 Rejected，它能够接收异步操作返回的结果或错误信息，并且可以链式调用 then 方法。
Promise 的基本用法
创建 Promise
Promise 构造函数接收一个函数作为参数，这个函数的两个参数 resolve 和 reject 分别表示异步操作成功的返回值和失败返回的错误信息。
示例代码：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ----
------------- -- -
----- ------ - --------------
-- ------- - ---- -
----------------
- ---- -
---------- ---------- ------ ------ -- ---- ---- --------
-
-- ------
---调用 Promise
创建好 Promise 后，我们可以通过 then 方法来取得异步操作的返回值或错误信息，也可以使用 catch 方法来处理错误信息。
示例代码：
-- -------------------- ---- -------
-------
----------- -- -
-- --- ----- ------------
-------------------
--
------------ -- -
-- --- ----- -------------
-----------------------------
---Promise 的链式调用
Promise 的 then 方法返回一个新的 Promise，因此我们可以进行链式调用，依次处理多个异步操作。链式调用的目的是减少回调函数的嵌套，从而使代码更加清晰。
示例代码：
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(posts => {
console.log(posts);
})
.catch(error => {
console.error(error.message);
});上述代码使用 fetch 方法获取 JSON 数据，然后使用 then 方法来解析数据并输出，如果出现错误则使用 catch 方法来处理。
Promise 的深度讲解
Promise 的三种状态
Promise 有三种状态：Pending、Fulfilled 和 Rejected，它们分别表示异步操作的三种状态：进行中、成功和失败。状态一旦变化就不会再变化了，也就是说 Promise 的状态是不可逆的。
示例代码：
-- -------------------- ---- -------
-- ------- -----
----- ------- - --- ----------------- ------- -- -
-- ----
------------- -- -
----- ------ - --------------
-- ------- - ---- -
---------------- -- ---
- ---- -
---------- ---------- ------ ------ -- ---- ---- -------- -- ---
-
-- ------
---
--------------------- -- ------- -----------上述代码创建了一个 Promise，并输出了这个 Promise 的状态，由于 Promise 是异步操作，因此我们得到的状态是 Pending（进行中）。
Promise 的 then 方法
Promise 的 then 方法有两个参数，第一个参数是成功回调函数，表示异步操作成功后的处理。第二个参数是失败回调函数，表示异步操作失败后的处理。then 方法可以链式调用，也就是说，它可以接收一个参数，这个参数就是 then 方法返回的新的 Promise。
示例代码：
-- -------------------- ---- -------
-------
----------- -- -
-- --- ----- ------------
-------------------
-- ----- -- -
-- --- ----- -------------
-----------------------------
--
-------- -- -
---------------- ------ --------
--
------------ -- -
-----------------------------
---上述代码针对之前的 Promise 对象调用了 then 方法，并传入了两个函数作为参数，第一个函数处理异步操作成功后的返回值，第二个函数处理异步操作失败后的错误信息。然后又使用 then 方法链式调用了第二个 then 方法，并使用 catch 方法来处理错误信息。
Promise 的 catch 方法
Promise 的 catch 方法只接收一个参数，这个参数是一个函数，表示异步操作失败后的处理，它相当于 then 方法的第二个参数。
示例代码：
-- -------------------- ---- -------
-------
----------- -- -
-- --- ----- ------------
-------------------
--
------------ -- -
-- --- ----- -------------
-----------------------------
---上述代码是针对之前的 Promise 对象调用了 then 方法和 catch 方法，then 方法处理异步操作成功后的返回值，catch 方法处理异步操作失败后的错误信息。
Promise 的 finally 方法
Promise 的 finally 方法只接收一个参数，这个参数是一个函数，它表示不管 Promise 的状态如何，这个函数都会被执行。
示例代码：
-- -------------------- ---- -------
-------
----------- -- -
-- --- ----- ------------
-------------------
--
------------ -- -
-- --- ----- -------------
-----------------------------
--
----------- -- -
------------------------
---上述代码是针对之前的 Promise 对象调用了 then 方法、catch 方法和 finally 方法，finally 方法表示不论异步操作的状态如何，这个函数都会执行，并在最后输出 Finally.。
Promise 的 all 方法
Promise 的 all 方法接收一个数组作为参数，数组中每个元素为一个 Promise。
all 方法将返回一个新的 Promise，它将处理这个数组中所有 Promise 的状态，只有所有 Promise 的状态都变成 Fulfilled，才会返回一个包含所有异步操作结果的数组，只要有一个 Promise 的状态变成 Rejected，就会返回一个错误信息。
示例代码：
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - -------------------
----- -------- - --- ----------------- ------- -- -
------------- -- -
-----------
-- ------
---
---------------------- --------- ----------
------------ -- -
--------------------
--
------------ -- -
-----------------------------
---上述代码创建了三个 Promise，其中两个是 Fulfilled 状态，一个是 Pending 状态，然后将这三个 Promise 放入一个数组中，再调用 all 方法，根据 Promise.all 方法运行的规则，只有当这三个 Promise 都变成 Fulfilled 状态后，才会输出 Fulfilled 的结果。
Promise 的 race 方法
Promise 的 race 方法和 all 方法很像，它也是接收一个数组作为参数，数组中每个元素为一个 Promise。
race 方法将返回一个新的 Promise，它将根据数组中第一个异步操作的状态（Pending、Fulfilled 或者 Rejected）来返回结果（包含返回值或错误信息）。
示例代码：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
-----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
-----------
-- -----
---
----------------------- ----------
----------- -- -
-------------------
--
------------ -- -
-----------------------------
---上述代码针对两个 Promise 对象调用了 race 方法，并传入了一个数组作为参数，这两个 Promise 的状态不同，一个的延迟时间为 1 秒钟，一个的延迟时间为 0.5 秒钟，调用 race 方法后，将会返回延迟时间为 0.5 秒钟的 Promise 对象的返回值 2。
Promise 的错误处理
当 Promise 的异步操作失败后，我们可以使用 then 方法的第二个参数或者 catch 方法来处理错误，但是如果操作失败后不进行任何处理，则会抛出异常，该异常无法被捕获，因此最好的方式是在 Promise 对象后始终调用 catch 方法来处理错误。
示例代码：
promise
.then(value => {
console.log(value);
})
.catch(error => {
console.error(error.message);
});上述代码是对 Promise 对象调用 then 方法和 catch 方法，then 方法处理异步操作成功后的返回值，catch 方法处理异步操作失败后的错误信息。
Promise 的使用场景
Promise 主要用于异步操作，它可以将异步操作封装成 Promise 对象，并简化异步操作代码的书写，提高了代码可读性和可维护性。Promise 还可以进行链式调用和错误处理，使异步操作的代码更加简洁和清晰。
常见的 Promise 应用场景
- Ajax 请求数据。
- 防抖和节流。
- 异步操作的串联、合并和取消。
- Promise 封装的模块化开发。
总结
Promise 是用于异步编程的一种解决方案，它可以将异步操作封装成 Promise 对象，并简化异步操作代码的书写。Promise 的 then 和 catch 方法用于链式调用和错误处理，使异步操作的代码更加简洁和清晰。Promise 的 all 和 race 方法可以用于多个异步操作的处理，它们也是开发中经常用到的工具。当然，在使用 Promise 时也要注意错误处理的问题，始终使用 catch 方法来处理错误信息，并且要根据具体的应用场景进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459ae57968c7c53b0bc8f94