随着互联网的快速发展，前后端分离的技术越来越成熟。在前端开发中，常常需要同时向不同的后端接口发送请求，并获得请求结果进行处理。而 ES8 引入的 async/await 关键字，可以让我们更加方便地实现异步请求操作。
什么是 async/await
async 和 await 是 ECMAScript 8 中的一个关键字。async 用来声明一个异步函数，而 await 则用来等待一个异步操作的返回结果。在 async 函数中使用 await 可以避免回调函数的嵌套，使代码更加直观和易于维护。
以下是一个使用 async/await 请求 GitHub Api 的示例代码：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ----------------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-
------------在上述代码中，使用 async 关键字声明 fetchData 函数，并在函数内部使用 await 停止程序的执行，直到通过 fetch 发送请求并且获得响应结果为止。如果请求成功，使用 response.json() 函数获得响应结果的 JSON 数据；如果请求失败，则将错误信息打印在控制台上。
同时请求多个接口
在前端开发中，同时向多个接口发送请求是很常见的需求。在 ES8 中可以使用 Promise.all() 函数来实现同时请求多个 API 的场景。下面是示例代码：
-- -------------------- ---- -------
----- -------- -------------- -
--- -
----- ---------- --------- - ----- -------------
----------------------------------------------------------- -- -----------------
----------------------------------------------------------------- -- ----------------
---
--------------------- ----------
- ----- ------- -
---------------------
-
-
---------------在上述代码中，使用 Promise.all() 来并行地执行两个 API 请求，返回的是一个包含所有响应结果的数组。然后使用数组解构的方式，将 userData 和 repoData 分别赋值为数组中的第一个和第二个元素，这样就可以将两个请求的结果分别拿到进行处理。
总结
使用 ES8 async/await 和 Promise.all() 来处理前端异步请求，可以大大简化异步操作的代码实现。同时，它也使得我们更加便于处理多个接口的并行请求，提高了应用程序的性能和用户体验。
我们希望本文的讲解能够提供一些思路与帮助，让大家能够更好地应用 async/await 和 Promise.all() 来快速响应应用程序的异步请求，为前端开发的工作提供更多的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6463a1cf968c7c53b04ab947