在使用 Promise 时避免 then 链的反模式
随着 JavaScript 工具和框架的发展，Promise 在前端的开发中越来越常用。然而，即使是有经验的开发者也可能遇到 then 链的反模式问题，导致代码难以维护和扩展。本文将介绍如何避免 then 链的反模式，并提供一些示例代码作为指导。
Promise 的 then 链
Promise 是一种用于异步编程的技术，可以将异步操作序列化为一个链式结构，以解决回调嵌套的问题。在使用 Promise 时，我们通常会使用 then 方法将回调函数连接起来，形成 then 链。例如：
promise.then(onSuccess1) .then(onSuccess2) .then(onSuccess3) .catch(onError);
这个 then 链的意思是，如果无错误发生，依次执行 onSuccess1、onSuccess2 和 onSuccess3 回调函数。如果失败则执行 onError 回调函数。如果 onSuccess1 返回一个 Promise，就会把这个 Promise 传递给下一个 then 方法，以实现连续的异步操作。
问题在哪里？
尽管 then 链看起来很简单和直观，但在实现相对复杂的业务场景时，我们可能会遇到下面几个问题。
- 难以维护
在一个 then 链中，每个 then 方法都要处理一个异步操作的结果。如果我们需要添加或修改某个异步操作的处理，那么我们必须找到这个异步操作所在的 then 方法，并对其进行修改。这样的过程可能会让我们失去代码的可维护性。
- 处理失败很困难
由于 then 链是连续的，一旦其中断开了，我们就可能丢失之前的所有处理结果。例如：
-- -------------------- ---- ------- ------------------------ - ------------------------- - -- ------- -- ---------------- - -- ------- ------ --- -- ---------------- - -- ------- ------ -- ------------------------- - -- ------- -------- ---展开代码
如果 p1、p2 都失败了，那么只有最后一个 catch 才能捕获这两个操作的错误。这导致我们必须在最后一个 catch 中处理之前所有的成功和失败。
避免 then 链的反模式
为了避免 then 链的反模式，我们需要创建一个更多的 Promise，以便更灵活地控制异步操作的执行流程。我们将这种方法称为 Promise 链。
Promise 链的主要思想是把 then 链中的每个 then 方法解耦，将它们转化为单独的同步函数。这样做可以使我们更清楚地了解每个操作的结果，过程也更加可控。
下面是一段示例代码，使用 Promise 链实现了一个相对复杂的业务场景。
-- -------------------- ---- ------- -------- ----- - ------ ------- ------------ ------------ ---------------- - ------ -------------------------------- -- ------------ ---------------- - ------ --------------------------------- -- -------------------- -展开代码
在这个示例中，我们把每个异步操作都拆成了单独的函数。在实际的应用中，这些函数可能会非常复杂，但是用这种方式可以避免 then 链的反模式。
使用 Promise.all 避免丢失中间结果
使用 Promise.all 方法来保证所有异步操作都执行完毕，并将它们的结果合并成一个数组。下面是一段示例代码：
-- -------------------- ---- ------- ------------- ------------------- ------------------- ------------------ -- ---------------------- - -- ------ ------- -- ---------------------- - -- ------ ----- ---展开代码
在这个示例中，Promise.all 会等待所有 Promise 完成后再执行后续操作。并且如果其中有 Promise 出现错误，整个 Promise.all 的执行会停止，所以不容易出现丢失中间结果的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c7068ecc0f7239cde94c14
