Promise 是一种用于处理异步操作的 JavaScript 核心模块，它可以帮助我们确保代码正确地处理异步操作反馈。在前端开发中，使用 Promise 是非常常见的，但是链式使用 Promise 的技巧却不是那么容易掌握。在本文中，我们将介绍如何正确地链式使用 Promise，帮助开发者更好的使用 Promise 处理异步操作。
1. Promise 链式调用
在 JavaScript 中，Promise 可以通过链式调用来串行化处理异步操作，因为在 JavaScript 代码中，异步操作的执行有可能会和代码的编写顺序混杂在一起，导致代码难以阅读和维护。链式调用的语法非常简单，就是把回调函数从 Promise 中提取出来，然后通过 .then() 方法来串联起来，每次返回新的 Promise 实例。以下是一个使用 Promise 链式调用的示例代码：
-- -------------------- ---- -------
--- ----------------- ------- -- -
---------------
--
------------ -- -
--------------------
------ --- ----------------- ------- -- -
--------------
---
--
---------- -- -
-----------------
--
-------- -- -
-------------------
--
--------- -- -
-------------------
---上述代码中，首先创建了一个 Promise 实例，然后通过 .then() 方法处理 resolve 后的结果，并生成新的 Promise 实例，可以看到，在第一次处理后，返回了一个新的 Promise 实例。然后在该 Promise 实例中，使用 .catch() 方法处理 Promise 的错误，并返回一个新的 Promise 实例。接着通过第二次 .then() 方法继续处理 Promise 返回的结果，最后使用 .catch() 方法处理整个 Promise 链式操作的错误。
需要注意的是，使用 Promise 链式调用时，每次返回新的 Promise 实例的原因是，每次处理完操作后，我们需要将 Promise 传递给下一个链式调用来进行后续的处理。
2. 如何正确地使用 Promise 链式调用
虽然 Promise 链式调用语法简单，但是在实际的开发中，我们需要遵循一定的原则来保证 Promise 的正确使用。下面是一些 Promise 链式调用的使用原则：
合理使用 then、catch、finally
在使用 Promise 链式调用时，需要注意合理使用 .then()、.catch()、.finally() 方法。.then() 方法用于处理 Promise 的 resolve 返回值，.catch() 方法用于处理 Promise 的 reject 返回值，.finally() 方法无论返回什么都会执行，所以如果需要对 Promise 进行一些完结操作，可以使用 .finally() 方法。同时需要注意的是，使用 .catch() 方法后需要再次使用 .then() 方法，否则链式调用会被截断。
返回值需使用 Promise 对象
在每次链式调用中，都需要使用 Promise 对象作为返回值，以使后续方法能够正确地进行操作。如果没有返回 Promise 对象，则会导致链式调用错误。同时，Promise 链式调用中的返回值会传递给下一个链式调用，如果没有需要传递的值，则可以返回 undefined。
处理错误
链式调用中必须处理错误，因为如果不处理，错误将一直向下传递。同时，在链式调用中，应该使用 catch 进行错误处理，而不是在 Promise 的回调函数中使用 try-catch 进行错误处理。
3. 示例代码
以下是一个使用 Promise 链式调用获取数据的示例代码，可以帮助理解 Promise 链式调用的使用方法：
-- -------------------- ---- -------
-----------------------------------------------------
-------------- -- ----------------
---------- -- -
------------------ ------
------ ------------------------------------------------------
--
-------------- -- ----------------
---------- -- -
------------------ ------
------ ------------------------------------------------------
--
-------------- -- ----------------
---------- -- -
------------------ ------
--
-------------- -- -
-------------------- -------
---上述代码包含了三个 .then() 方法和一个 .catch() 方法。在第一个 .then() 方法中，获取了第一个数据并返回了一个 Promise 实例；在第二个 .then() 方法中，获取了第二个数据并返回了一个 Promise 实例；在第三个 .then() 方法中，获取了第三个数据并不再返回 Promise 实例，因为它已经是最后的结果。同时在整个 Promise 链式调用中，使用了 .catch() 方法对错误进行捕获和处理。
4. 总结
在开发中，使用 Promise 很容易，但是如果不掌握 Promise 链式调用的技巧，很容易由于 Promise 过深的嵌套而使代码难以理解和维护。正确地掌握 Promise 链式调用技巧不仅可以让开发者更好地处理异步操作，还可以帮助开发者更好地处理代码逻辑，提升代码的可读性和可维
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66443e17d3423812e4220941