在前端开发中，我们经常会遇到需要进行异步流程控制的情况，比如需要在一个异步请求完成后再进行下一个异步请求。在 ES6 中，Promise 的出现为我们提供了一种更加优雅的解决方案。
Promise 简介
Promise 是一种异步编程的解决方案，它可以优雅地处理异步操作并返回一个 Promise 对象。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。当 Promise 对象的状态从 pending 转变为 fulfilled 或 rejected 时，就会触发 then 方法或 catch 方法。
Promise 的基本用法
Promise 的基本用法如下：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- ---- -- ---------- ------- -- -- ---------- ------ -- --- ------------------- -- - -- ------ -------------- -- - -- ------ ---
在 Promise 构造函数中，我们需要传入一个函数，这个函数接受两个参数：resolve 和 reject。resolve 函数用于将 Promise 对象的状态从 pending 转变为 fulfilled，reject 函数用于将 Promise 对象的状态从 pending 转变为 rejected。
then 方法用于处理 Promise 对象的成功结果，catch 方法用于处理 Promise 对象的失败结果。then 和 catch 方法都可以接受一个回调函数作为参数，这个回调函数的参数就是 resolve 函数或 reject 函数中传递的参数。
Promise 的链式调用
Promise 还支持链式调用，这样可以让异步操作按照一定的顺序执行。
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
-- ----
-- ---------- ------- --
-- ---------- ------ --
---
----- -------- - --------------------- -- -
-- -- -------- ------------- ------- --
------ --- ----------------- ------- -- -
-- ----
-- ---------- ------- --
-- ---------- ------ --
---
---
--------------------- -- -
-- -- -------- -----
-------------- -- -
-- -- -------- - -------- -----
---在上面的代码中，我们首先创建了一个 Promise 对象 promise1，然后使用 then 方法处理 promise1 的成功结果，并返回一个新的 Promise 对象 promise2。最后，我们使用 then 方法处理 promise2 的成功结果，使用 catch 方法处理 promise1 或 promise2 的失败结果。
Promise 的并行调用
Promise 还可以实现异步操作的并行调用。我们可以使用 Promise.all 方法来实现多个异步操作并行执行，并在所有异步操作完成后处理结果。
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - -- ---- -- ---------- ------- -- -- ---------- ------ -- --- ----- -------- - --- ----------------- ------- -- - -- ---- -- ---------- ------- -- -- ---------- ------ -- --- ---------------------- ----------------------- -- - -- ------------- -------------- -- - -- ------------- ---
在上面的代码中，我们首先创建了两个 Promise 对象 promise1 和 promise2，然后使用 Promise.all 方法将它们传入。当所有异步操作都完成后，Promise.all 方法会将所有异步操作的成功结果作为一个数组传递给 then 方法，我们可以在 then 方法中处理这些结果。
Promise 的错误处理
当 Promise 对象的状态变为 rejected 时，我们可以使用 catch 方法来处理错误。但是，如果我们在异步操作中使用了 try-catch 语句来捕获错误，我们也可以使用 reject 函数将错误信息传递给 catch 方法。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
--- -
-- ----
-- ---------- ------- --
-- ------------
- ----- ------- -
--------------
-
---
------------------- -- -
-- ------
---在上面的代码中，我们在 Promise 构造函数中使用 try-catch 语句来捕获错误，如果操作失败，则使用 reject 函数将错误信息传递给 catch 方法。
Promise 的指导意义
Promise 的出现使得异步流程控制更加优雅和简洁。使用 Promise 可以将异步操作的处理结果传递给下一个异步操作，从而实现异步操作的顺序执行。使用 Promise.all 方法可以实现多个异步操作的并行执行，并在所有异步操作完成后处理结果。使用 Promise 还可以处理异步操作中的错误信息，使得代码更加健壮和可靠。
示例代码
-- -------------------- ---- -------
----- -------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
---------
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- --
---
-- ------
---
--
----- ------------ - ------ -- -
------ --- ----------------- ------- -- -
------------- -- -
-- ------- --- -- -
---------
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
---
- ---- -- ------- --- -- -
---------
- --- -- ------ ----- -- --
- --- -- ------ ----- -- --
---
- ---- -
---------- ----------- --- ---------
-
-- ------
---
--
----------
----------- -- -
--------------------- -------
----- -------- - -------------- -- -----------------------
------ ----------------------
--
----------- -- -
--------------------- -------
--
------------ -- -
---------------------
---在上面的代码中，我们首先定义了两个异步操作 getUsers 和 getUserPosts，分别用于获取用户列表和获取用户的文章列表。在 getUsers 方法中，我们使用 setTimeout 模拟异步操作，1 秒后返回一个包含三个用户的数组。在 getUserPosts 方法中，我们根据传入的 userId 返回不同的文章列表，如果 userId 不存在，则使用 reject 函数将错误信息传递给 catch 方法。
在代码的最后，我们使用 getUsers 方法获取用户列表，并使用 then 方法处理成功结果。在 then 方法中，我们使用 map 方法将用户列表转换为一个包含多个 Promise 对象的数组，并使用 Promise.all 方法将这些 Promise 对象传入，从而实现多个异步操作的并行执行。在最后一个 then 方法中，我们处理所有异步操作的成功结果，并打印出用户的文章列表。如果出现错误，则使用 catch 方法处理错误信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d38f1ba941bf71346c8c75
