在现代的前端开发中，异步操作已经成为了必不可少的一部分。ES6 引入了 Promise 对象来简化异步操作，而 ES7 中的 async/await 更是让异步操作变得更加简单易用。而在 ES9 中，for-await-of 和 Promise.all() 的结合应用则更加方便了我们对异步操作的处理。
for-await-of
在 ES9 中，我们可以使用 for-await-of 来循环异步操作。它可以遍历异步操作返回的 Promise 对象，并在 Promise 对象 resolve 之后执行下一步操作。我们可以使用 async/await 来定义异步操作，然后使用 for-await-of 循环执行这些操作。下面是一个简单的示例：
----- -------- ----------- -
------ --- --------------- -- -
------------- -- -
-----------------
-- ------
---
-
------ ---------- -
--- ----- ------ ------ -- ------------- --------- -
--------------------
-
-----在这个示例中，我们定义了一个异步函数 asyncFunc，它会在 1 秒钟后 resolve 'Hello'。我们将 asyncFunc 和 'World' 放在一个数组中，并使用 for-await-of 循环遍历这个数组。在遍历 asyncFunc 返回的 Promise 对象时，for-await-of 会等待 Promise resolve 后才执行下一步操作。最终输出结果为：
----- -----
Promise.all()
在前端开发中，我们经常需要同时处理多个异步操作，这时 Promise.all() 就能派上用场了。Promise.all() 接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。当传入的所有 Promise 对象都 resolve 时，Promise.all() 返回的 Promise 对象也会 resolve，返回的结果为一个数组，数组中包含了每个 Promise resolve 的结果。如果有任何一个 Promise reject，则整个 Promise.all() 返回的 Promise 对象也会 reject。
下面是一个简单的示例：
----- -------- ------------ -
------ --- --------------- -- -
------------- -- -
-----------------
-- ------
---
-
----- -------- ------------ -
------ --- --------------- -- -
------------- -- -
-----------------
-- ------
---
-
------ ---------- -
----- ------- - ----- -------------------------- ---------------
---------------------
-----在这个示例中，我们定义了两个异步函数 asyncFunc1 和 asyncFunc2，它们分别在 1 秒钟和 2 秒钟后 resolve 'Hello' 和 'World'。我们将这两个异步函数放在一个数组中，并使用 Promise.all() 来同时执行它们。最终输出结果为：
- -------- ------- -
结合应用
结合使用 for-await-of 和 Promise.all() 可以让我们更加方便地处理多个异步操作。我们可以使用 for-await-of 循环遍历异步操作数组，并在每个异步操作执行完毕后将结果 push 到一个新的数组中。最后，我们再使用 Promise.all() 来执行这个新的数组中的异步操作，并在所有异步操作执行完毕后返回结果。
下面是一个示例代码：
----- -------- ------------ -
------ --- --------------- -- -
------------- -- -
-----------------
-- ------
---
-
----- -------- ------------ -
------ --- --------------- -- -
------------- -- -
-----------------
-- ------
---
-
------ ---------- -
----- ------- - ---
--- ----- ------ ------ -- -------------- -------------- -
---------------------
-
----- ------------ - ----- ---------------------
--------------------------
-----在这个示例中，我们定义了两个异步函数 asyncFunc1 和 asyncFunc2，它们分别在 1 秒钟和 2 秒钟后 resolve 'Hello' 和 'World'。我们将这两个异步函数放在一个数组中，并使用 for-await-of 循环遍历它们。在每个异步操作 resolve 后，我们将结果 push 到一个新的数组中。最后，我们使用 Promise.all() 来执行这个新的数组中的异步操作，并在所有异步操作执行完毕后返回结果。最终输出结果为：
- -------- ------- -
总结
ES9 中的 for-await-of 和 Promise.all() 的结合应用可以让我们更加方便地处理多个异步操作。我们可以使用 for-await-of 循环遍历异步操作数组，并在每个异步操作执行完毕后将结果 push 到一个新的数组中。最后，我们再使用 Promise.all() 来执行这个新的数组中的异步操作，并在所有异步操作执行完毕后返回结果。这种结合应用可以让我们更加高效地处理异步操作，提高代码的质量和效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656dc617d2f5e1655d602d50