在现代的 JavaScript 编程中，Promise 是一种非常重要的概念，它可以使异步操作更加简单和易于管理。尽管在 ECMA2015 中它已经被引入了，但是在 ECMA2017 中，它得到了重要的更新和完善。在这篇文章中，我将会详细解释如何在 ECMAScript 2017 中正确地使用 Promise 对象，并且会提供具体的代码示例。
什么是 Promise
Promise 是一种用于异步编程的对象。它提供了一种处理异步操作的机制，通过 Promise 对象可以非常方便地进行异步编程并管理异步操作。Promise 可以看作是一个异步操作的占位符，它可以让我们在异步操作完成后获取到操作结果，同时在异步操作进行的同时也可以执行其他的操作。
Promise 的基本用法
Promise 的基本用法非常简单。我们可以使用 Promise 构造函数来创建一个 Promise 对象：
const promise = new Promise((resolve, reject) => {
// 异步操作
});Promise 构造函数中接收一个函数作为参数，这个函数包含了一个异步操作，异步操作完成后需要调用 resolve 或 reject 函数来表示操作结果。
例如，下面的示例中使用 Promise 将一个数值乘以 2，然后把结果作为 Promise 的结果返回：
-- -------------------- ---- -------
----- ------------- - ----- -- -
------ --- ----------------- ------- -- -
-- ------- --- --- --------- -
----------- - ---
- ---- -
--------------- -----------
-
---
--接着，可以调用 Promise 对象的 then 和 catch 方法来处理 Promise 对象的执行结果：
const num = 4; multiplyByTwo(num) .then(result => console.log(result)) .catch(error => console.error(error));
在上述示例中，如果传入的参数不是一个数值，Promise 将会被 reject，并且在 catch 方法中捕获错误。
Promise 的几种状态
一个 Promise 对象可以处于三种状态：
- Pending（等待中）：初始状态，即 Promise 对象刚被创建出来的状态。
- Fulfilled（已完成）：异步操作成功完成。
- Rejected（已拒绝）：异步操作失败或出错。
当一个 Promise 对象处于 Pending 状态时，它可以转换为 Fulfilled 或 Rejected 状态。一旦一个 Promise 对象转换为 Fulfilled 或 Rejected 状态，它就会保持这个状态，并且不能再次转换。同时，一旦处于 Fulfilled 或 Rejected 状态，Promise 对象就可以传递结果值。
Promise 链式调用
在实际开发中，很多情况下一个异步操作需要依赖于另一个异步操作，或者需要对一个异步操作的结果进行处理。在这些情况下，Promise 链式调用就非常方便。
可以使用 then 方法链式地调用多个异步操作，同时在每个异步操作中返回一个新的 Promise 对象，这样就可以在链式调用中处理多个异步操作的结果。在链式调用中，如果任何一个异步操作发生错误，就会跳到 catch 方法，因此我们可以在 catch 方法中处理所有的错误。
例如，下面的示例中展示如何使用 Promise 链式调用实现异步操作的顺序执行：
-- -------------------- ---- -------
----- ----- - -- -- -
------ --- --------------- -- ------------------- ----- ---------
--
----- ----- - -- -- -
------ --- --------------- -- ------------------- ---- ---------
--
----- ----- - -- -- -
------ --- --------------- -- ------------------- ---- ---------
--
-------
------------- -- -
---------------------
------ --------
--
------------- -- -
---------------------
------ --------
--
------------- -- -
---------------------
--
------------ -- -
-------------------
---在上述示例中，wait1、wait2、wait3 是三个异步操作，分别等待 1 秒、500 毫秒和 300 毫秒，然后返回对应的字符串 'wait1'、'wait2' 和 'wait3'。在 Promise 链式调用中，每个 then 方法都返回一个新的 Promise 对象，它会在上一个 then 方法执行完毕后继续执行。因此，通过在 then 方法中返回新的 Promise 对象，我们可以保证异步操作的顺序执行。如果在任何一个异步操作中出现错误，Promise 链式调用就会跳到 catch 方法中。
async/await 语法糖
在 ECMAScript 2017 中，引入了 async/await 语法糖，它可以让 Promise 的使用更加简洁和优雅。async/await 语法糖可以让我们用同步的方式书写异步代码。
使用 async/await 语法糖可以将下面的代码：
-- -------------------- ---- -------
----- ----- - -- -- -
------ --- --------------- -- ------------------- ----- ---------
--
----- ----- - -- -- -
------ --- --------------- -- ------------------- ---- ---------
--
----- ----- - -- -- -
------ --- --------------- -- ------------------- ---- ---------
--
-------
------------- -- -
---------------------
------ --------
--
------------- -- -
---------------------
------ --------
--
------------- -- -
---------------------
--
------------ -- -
-------------------
---简化为下面的代码：
-- -------------------- ---- -------
----- ----- - -- -- -
------ --- --------------- -- ------------------- ----- ---------
--
----- ----- - -- -- -
------ --- --------------- -- ------------------- ---- ---------
--
----- ----- - -- -- -
------ --- --------------- -- ------------------- ---- ---------
--
------ ---------- -
--- -
----- ------- - ----- --------
---------------------
----- ------- - ----- --------
---------------------
----- ------- - ----- --------
---------------------
- ----- ------- -
-------------------
-
-----在上述代码中，使用了 async/await 语法糖使得我们可以使用同步的方式书写异步代码，在 async 函数中使用 await 等待 Promise 对象的结果。在 async/await 语法糖中，try-catch 块可以用来捕捉所有的 Promise 异常。
总结
在 ECMAScript 2017 中，Promise 被重要地更新和完善，为异步编程提供了更多的便利和技术支持。本篇文章简要介绍了 Promise 的基本用法、状态及链式调用和 async/await 语法糖等内容，通过具体的代码示例来说明这些概念的具体使用方法。在实际开发中，我们要深入理解 Promise 的各种特性以及各种异步操作的使用场景，从而可以更加有效地利用 Promise 进行异步编程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646051d6968c7c53b0209971