在 JavaScript 中，异步编程是必不可少的。JavaScript 单线程的特点，决定了它必须采用异步编程模型，才能充分利用 CPU 资源，提高程序的响应速度。
Promise 是 JavaScript 异步编程中的一种常用技术，它可以帮助我们更方便地管理异步操作，避免回调地狱，提高代码可读性和可维护性。本文将介绍 Promise 的基础知识，帮助读者快速上手 Promise。
Promise 简介
Promise 是一种异步编程的解决方案，它是对异步操作的一种抽象，用于表示一个异步操作的最终完成（或失败）及其结果值。Promise 对象代表一个异步操作的最终完成状态（成功或失败）和返回的值。
Promise 有三种状态，分别为 pending（进行中）、fulfilled（已完成）和 rejected（已失败）。当 Promise 进入 fulfilled 或 rejected 状态时，称为 Promise 已 settled（已定型）。
Promise 的基本用法如下：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- ---- -- ------- -------------- -- ------- -------------- --- ------------------ -- - -- -------- -- ------ -- - -- -------- ---
在 Promise 构造函数中，我们需要传入一个函数，该函数接受两个参数：resolve 和 reject。当异步操作成功时，我们需要调用 resolve 函数，并将结果作为参数传递给它；当异步操作失败时，我们需要调用 reject 函数，并将错误信息作为参数传递给它。
在 then 方法中，我们需要传入两个回调函数，分别代表异步操作成功和失败时的处理逻辑。当异步操作成功时，我们需要在成功的回调函数中获取操作结果；当异步操作失败时，我们需要在失败的回调函数中获取错误信息。
Promise 示例
下面是一个简单的 Promise 示例，用于读取一个文本文件的内容：
-- -------------------- ---- -------
----- -- - --------------
-------- ------------------------- -
------ --- ----------------- ------- -- -
--------------------- ------- ----- ----- -- -
-- ----- -
------------
- ---- -
--------------
-
---
---
-
---------------------------
---------- -- -
------------------
--
---------- -- -
-------------------
---在本例中，我们定义了一个 readFilePromise 函数，它返回一个 Promise 对象。在 Promise 构造函数中，我们调用 fs.readFile 函数进行异步读取文件操作。当读取成功时，我们调用 resolve 函数，并将读取到的文件内容作为参数传递给它；当读取失败时，我们调用 reject 函数，并将错误信息作为参数传递给它。
在 then 方法中，我们传入一个回调函数，用于处理读取成功时的逻辑；在 catch 方法中，我们传入一个回调函数，用于处理读取失败时的逻辑。
Promise 链式调用
Promise 还支持链式调用，这种方式可以让代码更简洁、更易读。下面是一个 Promise 链式调用的示例，用于将一个字符串转换为大写、再截取前 5 个字符：
-- -------------------- ---- -------
-------- ----------------------- -
------ --- ----------------- ------- -- -
---------------------------
---
-
-------- ------------------ ------ ------- -
------ --- ----------------- ------- -- -
------------------------- ---------
---
-
------------------------- -------
--------- -- ------------------ -- ---
--------- -- -
----------------- -- -----
--
---------- -- -
-------------------
---在本例中，我们定义了两个 Promise 函数，分别用于将字符串转换为大写和截取字符串。在 then 方法中，我们将 toUpperCasePromise 和 substrPromise 函数串联起来，通过链式调用来实现字符串转换和截取。当操作成功时，我们在最后一个 then 方法中获取到结果。
Promise.all 和 Promise.race
Promise 还提供了两个常用的方法：Promise.all 和 Promise.race。
Promise.all 方法用于将多个 Promise 对象包装成一个新的 Promise 对象，当所有的 Promise 对象都成功时，该新的 Promise 对象才算成功；当任意一个 Promise 对象失败时，该新的 Promise 对象就失败了。
下面是一个 Promise.all 的示例，用于同时读取多个文件的内容：
-- -------------------- ---- -------
----- -- - --------------
-------- ------------------------- -
------ --- ----------------- ------- -- -
--------------------- ------- ----- ----- -- -
-- ----- -
------------
- ---- -
--------------
-
---
---
-
-------------
-----------------------------
-----------------------------
----------------------------
--
---------- -- -
------------------ -- ------- ------ ------
--
---------- -- -
-------------------
---在本例中，我们使用 Promise.all 方法将三个 readFilePromise 函数包装成一个新的 Promise 对象，当三个函数都成功时，该新的 Promise 对象才算成功，我们在成功的回调函数中获取到三个文件的内容。
Promise.race 方法用于将多个 Promise 对象包装成一个新的 Promise 对象，当任意一个 Promise 对象成功或失败时，该新的 Promise 对象就成功或失败了。
下面是一个 Promise.race 的示例，用于同时请求多个网页，获取响应时间最短的那个网页的内容：
-- -------------------- ---- -------
-------- ----------------- -
------ --- ----------------- ------- -- -
----- --------- - -----------
----------
-------------- -- -
----- ------- - -----------
--------- ---- ----- ------- - ---------- ----- --------------- ---
--
---------- -- -
------------
---
---
-
--------------
--------------------------------------
---------------------------------------
--------------------------------------
--
---------- -- -
------------------ -- - ---- ------------------------ ----- ---- ----- ----- -
--
---------- -- -
-------------------
---在本例中，我们使用 Promise.race 方法将三个 fetchPromise 函数包装成一个新的 Promise 对象，当任意一个函数成功或失败时，该新的 Promise 对象就成功或失败了，我们在成功的回调函数中获取到响应时间最短的那个网页的内容。
Promise 总结
Promise 是 JavaScript 异步编程中的一种常用技术，它可以帮助我们更方便地管理异步操作，避免回调地狱，提高代码可读性和可维护性。本文介绍了 Promise 的基础知识，包括 Promise 的基本用法、Promise 示例、Promise 链式调用、Promise.all 和 Promise.race。希望本文能够帮助读者快速上手 Promise，更好地应用它来解决实际问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e04cbd1886fbafa4d848c3