引言
由于 Promise 是异步编程中非常重要的一部分，因此 Promise 的then方法的链式调用显得至关重要。但有时候 promise 的 then 链式调用过于复杂，难以维护和阅读，因此我们需要寻求解决方案。
Promise 的 then 链式调用
promise 是一种特殊的对象，用来表示一种异步操作（通常是一个异步操作）。 then 方法存在 promise 中，因为在异步任务完成时调用它。在它的参数中传递了 resolve 和 reject 函数。 resolve 函数会表示异步任务已经完成，而 reject 函数会表示异步任务失败。
通常我们是通过 then 的方式来解决 promise 的异步操作返回结果的问题，而且在处理逻辑较为复杂的时候也会使用多个 then 链式调用来解决。
----------
---------- -- ------------
---------- -- -
-- ------
--
------------ -- -
-------------------
--如上代码所示，我们通过 fetch 获取后端返回的 json 数据，然后通过 then 方法来处理数据，从而避免了回调地狱问题。
解决 then 链式调用问题
虽然 then 链式调用能够有效地解决回调地狱问题，但当 then 链需要传递值时，它可能变得非常复杂，例如这个例子：
----------
---------- -- ------------
---------- -- -
------ ------------- -- -----------
--
----------- -- -
------ --- -----------
--
----------------- -- -
------ ------------------------
--
---------------- -- -
----------------------- -- -
------------------
---
--
------------ -- -
-------------------
---在此示例中，我们首先获取后端返回的 json 数据，然后将其映射为一个包含名称的数组，并将其传递到下一个 then 中。接下来，我们将它们放入一个 Set 中，以确保名称的唯一性。在此之后，我们将其转换为一个标准数组，以便在最后一个 then 块中循环数组并打印名称。
虽然通过 then 链调用实现是正确的，但是阅读和维护此代码非常麻烦。这时候 async/await 就派上用场了。
使用 async/await 解决 then 链式调用问题
async/await 是 ECMAScript 的最新 JavaScript 语言功能之一，它可以使我们更轻松地处理异步代码，并使常规代码逻辑更易于阅读和理解。
使用 async 和 await 关键字，我们可以像同步代码一样书写异步代码。 通过 await 来等待异步操作的结果，不必使用 then 链式调用。
--- -
----- ---- - ----- -----------
----- ---- - ----- ------------
----- ----- - ------------- -- -----------
----- ----------- - --- -----------
----- ---------- - ------------------------
----------------------- -- -------------------
- ----- ------- -
-------------------
-在此示例中，我们使用了 async/await 结构，代码流程与同步代码相同。而且通过 try...catch 块来处理错误。
结论
then 链式调用虽然使异步代码变得更加简单易读，但是对于处理复杂的、有条件的代码执行逻辑方面，使用 async/await 更有优势。async/await 使异步编程更加简单，代码更直观，从而提高代码的品质。
我们应该根据代码场景判断是否使用 async/await 或 then 链式调用，并确保代码更加简洁、可读性更强。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670dc53b5f551281025e5a15