在 JavaScript 中，Promise 是一种处理异步操作的方法，它使我们能够更有效地处理异步代码。然而，在循环中使用 Promise 时，可能会遇到一些问题，例如循环被中止或不按顺序执行。在本文中，我们将讨论如何解决 Promise 中循环中止的问题。
Promise 中的循环
在 JavaScript 中，循环是一种常见的结构，我们可以使用它来重复执行代码。而在 Promise 中，我们有时会需要对一个数组进行循环遍历，每个元素执行异步操作，并在所有异步操作完成后执行某些代码。
例如，我们有一个包含 URL 的数组，我们想要依次访问这些 URL 并获取其中的数据。我们可以使用 Promise.all() 方法来处理这些异步操作并等待它们全部完成。但是，如果我们使用一个 for 循环来遍历这个数组，我们可能会遇到一些问题。
循环中止的问题
以下是一个使用 Promise.all() 和 for 循环来遍历 URL 数组的例子：
----- ---- - ----------------------- ---------------------- -----------------------
--- ---- - - -- - - ------------ ---- -
--------------
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------
-
---------------------- --------- ----------
-------- -- ---------------- -------- ------------在这个例子中，我们使用 for 循环遍历 URL 数组，并使用 fetch() 方法发送请求以获取数据。每个 fetch() 方法返回一个 Promise，我们在每个 Promise 完成后输出返回的数据。最后，我们使用 Promise.all() 方法来处理所有 Promise，并在它们全部完成后输出消息。
然而，当我们运行这个代码时，我们可能会发现它并不按照预期的方式工作。实际上，我们可能会看到输出了一些数据，然后停止了，而且我们没有得到我们期望的“所有 promises 都完成”的消息。
这是因为 for 循环是同步的，而 fetch() 方法是异步的。当一个 Promise 还没有完成时，我们已经进入了下一个循环迭代。这就导致了一些 Promise 永远不会被处理，而且我们的代码也没有按照预期的方式工作。
解决方案
为了解决 Promise 中循环中止的问题，我们可以使用递归函数来遍历数组并处理每个 Promise。这样我们就可以确保每个 Promise 都已经完成了，然后我们再去处理下一个 Promise。
以下是一个使用递归函数来处理 Promise 的例子：
----- ---- - ----------------------- ---------------------- -----------------------
-------- ------------- -
------ ----------
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------
-
-------- -------------- -
-- -- -- ------------ -
---------------- -------- -----------
-------
-
-----------------
-------- -- ------------- - ----
-
---------------在这个例子中，我们定义了一个名为 fetchUrl() 的函数，用于处理每个 URL 并返回一个 Promise。然后，我们定义了一个名为 processUrls() 的递归函数，用于遍历 URL 数组并依次处理每个 URL。如果遍历完了所有的 URL，则输出“所有 promises 都完成”的消息。
在 processUrls() 函数中，我们首先检查 i 是否已经超过了 URL 数组的长度。如果是，则输出消息，并返回。否则，我们调用 fetchUrl() 函数并等待其完成。然后，我们递归调用 processUrls() 函数，并传入下一个索引 i + 1。
结论
在 JavaScript Promise 中，我们有时会遇到循环中止的问题。为了解决这个问题，我们可以使用递归函数来遍历数组并处理每个 Promise。这样我们就可以确保每个 Promise 都已经完成了，然后我们再去处理下一个 Promise。这个方法可以确保我们的代码按照预期的方式工作，并能正确地处理所有 Promise。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671dbcb19babaf620fb7e183