ES6 中如何正确地使用 Promise
前言： Promise 是异步编程中常用的一种技术，它可以解决异步操作产生的回调函数嵌套过多、代码难以调试的问题。ES6 中，Promise 得到了官方支持和更完善的 API，成为了一种非常实用的异步编程技术。下面就详细介绍 ES6 中如何正确地使用 Promise。
- Promise 的基本用法
Promise 是一种代表异步操作的对象，它可以让我们用一种更优雅的方式处理异步操作。Promise 可以有三种状态：pending（等待中）、fulfilled（已成功）、rejected（已失败）。Promise 的初始状态为 pending，当异步操作执行成功后，Promise 的状态变为 fulfilled，当异步操作执行失败后，Promise 的状态变为 rejected。
使用 Promise 的基本语法如下：
new Promise(function(resolve, reject) {
// 异步操作的代码
// 执行成功时调用 resolve 函数，将结果作为参数传递给 resolve 函数
// 执行失败时调用 reject 函数，将失败原因作为参数传递给 reject 函数
});resolve 和 reject 函数分别表示异步操作成功和失败时的处理函数，它们接受一个参数，即异步操作的结果或失败的原因。Promise 对象可以直接调用 then 方法，来处理异步操作成功时的结果，调用 catch 方法，来处理异步操作失败时的原因。
下面是一个简单的例子，展示了 Promise 的基本用法：
-- -------------------- ---- -------
-------- ----------- -
------ --- ------------------------- ------- -
--------------------- -
----------------
-- ------
---
-
-----------
---------------------- -
--------------------
--
---------------------- -
-------------------
---在该例子中，我们定义了一个函数 delay，它返回了一个 Promise 对象。该 Promise 对象在 1 秒后执行成功时，调用 resolve 函数，并将参数 'done' 作为成功的结果返回。
然后，我们调用该函数，并在 then 方法中，处理成功的结果。在该例子中，我们简单地输出了 'done' 字符串。如果异步操作执行失败，则调用 catch 方法处理失败的原因。在本例子中，失败的情况没有被处理，如果需要处理失败的情况，可以在 Promise 函数中增加错误处理，并在 catch 方法中处理。
- Promise 的链式调用
在实际开发中，我们可能需要对多个异步操作进行处理，需要对多个 then 方法进行链式调用。在 Promise 中，then 方法会返回一个新的 Promise 对象，使得我们可以对多个异步操作进行链式调用。下面是一个简单的例子：
-- -------------------- ---- -------
-------- ----------- -
------ --- ------------------------- ------- -
--------------------- -
--------------
-- ------
---
-
-----------
----------------------- -
--------------------- -- ---------
------ ------------
--
----------------------- -
--------------------- -- ---------
------ ------------
--
----------------------- -
--------------------- -- ---------
---在该例子中，我们定义了一个函数 delay，它返回一个 Promise 对象，该 Promise 对象在指定的时间后执行成功时，将执行时间作为成功的结果返回。
然后，我们调用该函数，并在第一个 then 方法中，输出第一个异步操作的结果。在第二个 then 方法中，我们对第一个异步操作的结果执行了另一个异步操作，并输出第二个异步操作的结果。在第三个 then 方法中，我们对第二个异步操作的结果执行了第三个异步操作，并输出第三个异步操作的结果。
在上面的例子中，每个 then 方法的返回值都是一个 Promise 对象，这使得我们可以链式调用多个异步操作。在后面的 then 方法中，可以继续使用上一个 then 方法的结果，将数据以一定的顺序传递下去。
- Promise.all 和 Promise.race
在某些情况下，我们需要同时处理多个异步操作，需要等待所有异步操作执行完毕才能进行下一步操作。在 Promise 中，可以使用 Promise.all 方法来等待多个 Promise 对象执行完毕。Promise.all 方法接受一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。该 Promise 对象在所有 Promise 对象都执行成功时，调用 resolve 函数，将多个 Promise 对象的结果数组作为参数传递给 resolve 函数。如果其中任意一个 Promise 对象执行失败，就会调用 Promise.all 返回的 Promise 对象的 catch 方法。
下面是一个简单的例子，展示了使用 Promise.all 方法：
-- -------------------- ---- -------
-------- ----------- -
------ --- ------------------------- ------- -
--------------------- -
--------------
-- ------
---
-
------------------------- ------------ -------------
----------------------- -
---------------------
--
---------------------- -
-------------------
---在该例子中，我们使用 Promise.all 方法，传递了三个 Promise 对象作为参数，并在 then 方法中，输出所有异步操作的结果。
在实际开发中，有时候我们需要从多个异步操作中，获取最先执行成功的操作的结果。在 Promise 中，可以使用 Promise.race 方法来实现该功能，它与 Promise.all 方法类似，但是在多个异步操作中，只需要等待最先执行成功的 Promise 对象，就会调用 Promise.race 返回的 Promise 对象的 resolve 函数。
下面是一个简单的例子，展示了使用 Promise.race 方法：
-- -------------------- ---- -------
-------- ----------- -
------ --- ------------------------- ------- -
--------------------- -
--------------
-- ------
---
-
-------------------------- ------------ -------------
---------------------- -
--------------------
--
---------------------- -
-------------------
---在该例子中，我们使用 Promise.race 方法，传递了三个 Promise 对象作为参数，并在 then 方法中，输出最先执行成功的异步操作的结果。
- Promise 中的错误处理
在使用 Promise 时，需要进行错误处理，以便在异步操作执行失败时，能够及时捕获并处理错误。在 Promise 中，可以通过在异步操作执行失败时，调用 reject 函数并传递错误信息的方式，来处理错误信息。在实际开发中，很多异步操作都是通过 API 来进行的，API 中可能会返回一些错误信息，我们可以在 catch 方法中捕获这些错误信息。
下面是一个简单的例子，展示了如何在 Promise 中进行错误处理：
-- -------------------- ---- -------
-------- ------------ -
------ --- ------------------------- ------- -
--- --- - --- -----------------
--------------- ---- ------
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
---------- -----------------------
-
-
--
----------- - ---------- -
---------- -------------- ---------
--
-----------
---
-
------------------------------------------
---------------------- -
--------------------
--
---------------------- -
-------------------
---在该例子中，我们定义了一个函数 getJSON，它返回一个 Promise 对象。该 Promise 对象使用 XMLHttpRequest 对象发送一个 GET 请求，并在该请求执行成功或失败时，调用 resolve 或 reject 函数，返回或抛出请求的结果或错误信息。
我们在调用 getJSON 函数时，使用 then 方法处理成功的结果，在 catch 方法中，处理失败时的错误信息。在该例子中，我们通过 API 发送了一个 GET 请求，如果请求出错，则会触发 catch 方法，并输出错误信息。
- Promise 中的异常处理
在 JavaScript 中，当发生异常时，程序会抛出一个异常对象，并中止当前的函数执行。在异步操作中，如果代码容易发生异常，就需要进行异常处理，以防止程序异常中止，导致后续的代码无法执行。在 Promise 中，可以使用 try…catch 语句来处理函数执行过程中的异常。
下面是一个简单的例子，展示了如何在 Promise 中进行异常处理：
-- -------------------- ---- -------
-------- ----------- -
------ --- ------------------------- ------- -
--- -
--------------------- -
--------------
-- ------
- ----- ------- -
--------------
-
---
-
-----------
---------------------- -
--------------------
--
---------------------- -
-------------------
---在该例子中，我们定义了一个函数 delay，它返回一个 Promise 对象。在该函数中，我们使用 try…catch 语句来处理异步操作执行的可能出现的异常。如果异步操作执行发生异常，则调用 reject 函数，抛出异常，并在 catch 方法中处理异常信息。
在调用 delay 函数时，如果传递的参数为 null，则会触发 catch 方法，并输出异常信息。
总结：
通过以上的介绍，我们了解到了 Promise 在 ES6 中的基本用法以及常见的应用场景，包括 Promise 的基本语法、链式调用、并行处理、异常处理等。在实际开发中，需要根据具体情况，灵活使用 Promise，以提高代码的可读性和可维护性，避免异步代码的嵌套过多和回调地狱。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486c63c48841e989454e2ec