在前端开发中，我们经常需要处理多个异步请求，此时，Promise 可以帮助我们很好地解决这个问题。Promise 是一种用于处理异步操作的机制，它可以使我们更方便地处理异步任务，并减少回调嵌套的问题。在这篇文章中，我们将讲解如何使用 Promise 实现多次调用和串行异步请求。
多次调用的实现
有时候我们需要在一个异步操作中多次调用某个函数。例如，在页面中，我们需要通过一个接口加载一些数据，然后根据数据生成多个 DOM 元素。在这个场景下，我们希望能够将生成 DOM 的逻辑和接口请求逻辑分离，并能够在接口加载成功后多次调用生成 DOM 的函数。
下面是一个利用 Promise 实现多次调用的示例代码：
-- -------------------- ---- -------
-------- ---------- -
------ --- ----------------- ------- -- -
-- -----------
-- ------------- -------
-- ------------- ------
---
-
-------- ----------------- -
-- ------ --- ---
-
---------------------- -- -
--- ---- - - -- - - ------------ ---- -
---------------------
-
---------------- -- -
-- ------
---在代码中，我们定义了一个 loadData 函数来进行接口请求，并将请求结果传递给 resolve，请求错误则传递给 reject。接着我们定义一个 generateDOM 函数来进行 DOM 的生成。最后，我们通过 then 方法来处理 loadData 请求成功后的逻辑，并在函数中多次调用 generateDOM 函数来生成 DOM 元素。如果接口请求失败，则会执行 catch 方法中的逻辑。
串行异步请求的实现
另一方面，有时候我们需要处理多个异步任务，但是需要保证它们按照一定的顺序执行。例如，在购物页面中，我们需要先获取商品信息，然后获取购物车信息，最后才能将商品添加到购物车中。在这个场景下，我们需要将这些异步任务串行执行，以保证它们的执行顺序。
下面是一个利用 Promise 实现串行异步请求的示例代码：
-- -------------------- ---- -------
-------- ---------------- -
------ --- ----------------- ------- -- -
-- -------------
-- ------------- -------
-- ------------- ------
---
-
-------- ------------- -
------ --- ----------------- ------- -- -
-- --------------
-- ------------- -------
-- ------------- ------
---
-
-------- ----------- -
------ --- ----------------- ------- -- -
-- ----------------
-- ------------- -------
-- ------------- ------
---
-
----------------
-------- -- -
------ --------------
--
-------- -- -
------ ------------
--
-------------- -- -
-- ------
---在代码中，我们定义了三个函数：getProductInfo，getCartInfo 和 addToCart，分别用于获取商品信息、购物车信息和将商品添加到购物车中。它们都返回一个 Promise 对象，以进行错误处理和传递结果。
我们通过 then 方法将这三个函数串联起来，并在每个 then 方法中返回一个 Promise 对象，以保证它们的执行顺序。如果任何一个函数执行失败，则会跳转到 catch 方法中处理错误逻辑。
结论
在本文中，我们学习了如何使用 Promise 实现多次调用和串行异步请求。这两种实现能够帮助我们更方便地处理异步任务，提高代码的可读性和可维护性。希望这篇文章能够对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f7d5b5f5512810264d3fe