在前端开发当中，经常需要处理多个异步任务并行执行后返回的结果。针对这种情况，ES10 提供了一种更加优秀的处理方式，即 async/await 和 Promise.all 方法的结合使用。
async/await
async/await 是 ES7（ECMAScript 2017）中引入的一种处理异步代码的新方式，它可以通过更加清晰的语法实现同步的代码风格。
简单来说，通过 async 函数的定义使得函数返回一个 Promise 对象，而在 async 函数中使用 await 操作符可以暂停代码的执行，直到 Promise 对象返回结果。从而让像同步代码一样的方式可以处理异步的代码逻辑。
下面是一个使用 async/await 处理异步任务的示例代码：
----- -------- --------- -
----- ---- - ----- ------------
------------------
-
-------- ----------- -
------ --- --------------- --
------------- -- ------------- --- ---- ----------- -----
--
-
----------在上面的示例代码中，fetchData 函数模拟异步获取数据的过程，在 example 函数中使用了 async/await 方式等待 fetchData 函数的执行结果，并将结果输出到控制台上。
Promise.all
ES6 中引入了 Promise 对象，通过 Promise.all 方法可以在多个 Promise 对象异步执行完成后统一处理返回结果。这个方法接收一个 Promise 数组作为参数，当 Promise 数组中的所有 Promise 对象均为 resolved 状态时，返回结果为一个包含所有 Promise 对象返回结果的数组。
下面是 Promise.all 方法的示例代码：
----- ---------- - --- --------------- -- ------------- -- -------------- --- ---- ----------- ------------- - ----- -- ----- ---------- - --- --------------- -- ------------- -- -------------- --- ---- ----------- ------------- - ----- -- ----- ---------- - --- --------------- -- ------------- -- -------------- --- ---- ----------- ------------- - ----- -- ------------------------ ----------- ------------ ---------- -- ------------------ ------------ -- ----------------------
在上面的示例代码中，三个 Promise 对象 fetchData1、fetchData2 和 fetchData3 随机的模拟了异步获取数据的时间，Promise.all 方法将三个 Promise 对象作为参数传递，并在所有 Promise 对象返回结果后打印返回结果。
async/await 和 Promise.all 的结合使用
通过上面的两种方式，我们已经可以针对异步任务的执行和处理结果分别进行处理了。而在 ES10 中，我们可以将 async/await 和 Promise.all 两者的优点结合起来，更加优秀的处理多个异步任务的执行与结果处理。
下面是一个使用 async/await 和 Promise.all 结合使用的示例代码：
----- -------- --------- -
----- ---------- - --- --------------- --
------------- -- -------------- --- ---- ----------- ------------- - -----
--
----- ---------- - --- --------------- --
------------- -- -------------- --- ---- ----------- ------------- - -----
--
----- ---------- - --- --------------- --
------------- -- -------------- --- ---- ----------- ------------- - -----
--
----- ------- - ----- ------------------------ ----------- -------------
---------------------
-
----------在上面的示例代码中，我们将三个异步获取数据的 Promise 对象 fetchData1、fetchData2 和 fetchData3 作为参数传递给 Promise.all 方法，得到一个包含所有结果的数组并将其赋值给 results 变量，最后将结果输出到控制台上。
总结
通过学习上面的示例代码，我们可以发现 async/await 和 Promise.all 的结合使用能够更加优秀地处理多个异步任务并行执行后的结果。通过这种方式，我们可以清晰地表达异步任务的代码逻辑，同时也能够更加灵活地处理异步任务的返回结果，在日常的前端开发当中是非常实用的技术手段。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647d5a7d968c7c53b082af22