在前端开发中，我们经常会遇到需要依次执行多个异步操作的场景。传统的编写方式往往是将回调函数嵌套起来，这样代码可读性和可维护性都很差。而 Promise 的出现，使得链式操作可以更加简洁、易读，让前端开发更加高效。本文将详细介绍 Promise 中的链式操作实现流式编程的原理和使用方法。
Promise 链式操作的原理
Promise 链式操作是通过在 Promise 对象的 then 方法中返回一个新的 Promise 对象实现的。当一个 Promise 对象的状态变为 resolve 后，会自动将 resolve 的参数传入 then 方法中返回的 Promise 对象。如果这个 Promise 对象的状态是 reject，那么就会自动进入 catch 方法。
例如：
-- -------------------- ---- -------
----- -------- - --- --------------- -- -
------------- -- -
-------------- ---
-- ------
---
----- -------- - --- --------------- -- -
------------- -- -
-----------------
-- ------
---
------------------- -- -
------------------- -- ------ -
------ ---------
------------- -- -
------------------- -- -------
-------------- -- -
-------------------
---在这个例子中，promise1 和 promise2 都是 Promise 对象，它们分别返回字符串 'Hello ' 和 'World'。在 promise1 的 then 方法中，我们返回了另一个 Promise 对象 promise2，通过这样的方式，我们就实现了 Promise 链式操作。当 promise1 状态变为 resolve 时，会将 'Hello ' 传递给第一个 then 方法中的 value 参数，打印出 'Hello '；接着，promise2 的状态变为 resolve，将 'World' 传递给第二个 then 方法中的 value 参数，打印出 'World'。
如果其中任意一个 Promise 对象状态为 reject，就会进入 catch 方法中。例如：
-- -------------------- ---- -------
----- -------- - --- --------------- -- -
------------- -- -
-------------- ---
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------- ---------------- ---------
-- ------
---
------------------- -- -
------------------- -- ------ -
------ ---------
------------- -- -
-------------------
-------------- -- -
------------------- -- ------ --------- -----
---在这个例子中，promise1 依然返回字符串 'Hello '，但是 promise2 的状态变为了 reject，并且在回调函数中返回了一个 Error 对象。当 promise1 resolve 后，promise2 的状态还没有改变，所以不会执行第二个 then 方法，而是进入 catch 方法中打印错误信息。
Promise 链式操作的优点
使用 Promise 链式操作实现流式编程有以下几个优点：
- 代码清晰易懂：使用 Promise 链式操作，可以避免层层嵌套的回调函数，使代码更加清晰易懂，可读性和可维护性都有很大提升。
- 错误处理方便：Promise 可以通过 catch 方法中处理所有 Promise 对象中的错误，只需要在最后加上一个 catch 方法即可捕获所有 Promise 对象可能出现的错误。
- 代码复用度高：通过链式操作，可以将多个 Promise 对象中常用的方法提取出来用于复用。例如，同一个项目中多个接口都需要进行 token 验证，就可以将验证 token 的方法封装为一个 Promise 对象，在每个接口调用时都可以复用。
Promise 链式操作的示例
下面是一个使用 Promise 链式操作进行登录和获取用户资料的示例：
-- -------------------- ---- -------
-------- --------------- --------- -
------ --- ----------------- ------- -- -
------------- -- -
-- --------- --- ------- -- -------- --- --------- -
-------------- ----------
- ---- -
---------- ------------ ----------
-
-- ------
---
-
-------- ------------- -
------ --- --------------- -- -
------------- -- -
--------- ----- ------ ---- -- ---
-- ------
---
-
-------------- ---------
-------- -- -
------ --------------
--
------------ -- -
-------------------- -- - ----- ------ ---- -- -
--
------------ -- -
--------------------- -- ------ ----- ------
---在这个示例中，先定义了登录和获取用户资料的两个方法。在登录方法中，如果用户名和密码匹配，则返回一个 resolve 的 Promise 对象，否则返回一个 reject 的 Promise 对象；在获取用户资料方法中，无论什么情况下都返回一个 resolve 的 Promise 对象，返回用户信息对象。在主函数中，先调用 login 方法进行登录，如果登录成功就调用 getUserInfo 方法获取用户信息，并在拿到用户信息后打印出来；如果登录失败就打印出错误信息。
结论
Promise 链式操作可以使异步编程更加简洁、易读。使用链式操作的优点是代码清晰易懂、错误处理方便、代码复用度高。只需要在 Promise 对象中使用 then 方法，在回调函数中返回一个新的 Promise 对象，就可以实现链式操作。在实际开发中，我们应该遵循 Promise/A+ 规范，使用 Promise 的 then 和 catch 方法，以达到更好的代码组织效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efd0356fbf96019730f203