在前端开发中，经常需要处理并发请求，例如同时请求多个接口数据，然后将这些数据合并渲染到页面上。传统的处理方式是使用 Promise.all 方法，但是这种方法有时会显得冗长和复杂。ES7 中引入了 async/await 语法，可以更加简单和直观地处理并发请求。
async/await 简介
async/await 是 ES7 中的新语法，用于处理异步操作。async 函数返回一个 Promise 对象，可以在函数内部使用 await 关键字来等待 Promise 的处理结果。当 Promise 处理完成后，await 会返回 Promise 的 resolve 值，或者抛出 reject 异常。
下面是一个简单的 async/await 示例：
----- -------- --------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------------------ - ----------
上面的代码中，getData 函数使用了 async 关键字，表明它是一个异步函数。在函数内部，使用 await 关键字等待 fetch 方法返回的 Promise 对象处理完成，然后再等待 response.json() 方法返回的 Promise 处理完成。最后，将处理结果打印到控制台上。
处理并发请求
使用 async/await 处理并发请求，可以通过 Promise.all 方法来实现。Promise.all 方法接受一个 Promise 对象数组作为参数，返回一个新的 Promise 对象。当数组中的所有 Promise 对象都处理完成后，Promise.all 返回的 Promise 对象才会处理完成。
下面是一个使用 async/await 处理并发请求的示例：
----- -------- --------- -
----- ------- ------ ------ - ----- -------------
---------------------------------------------------- -- -----------------
---------------------------------------------------- -- -----------------
---------------------------------------------------- -- ----------------
---
------------------ ------ -------
-
----------上面的代码中，使用 Promise.all 方法同时处理三个请求。每个请求返回的 Promise 对象都使用 then 方法来处理 Promise 的 resolve 值，并将处理结果存储到一个数组中。当 Promise.all 返回的 Promise 处理完成后，将数组解构赋值给三个变量，分别表示三个请求的处理结果。最后，将处理结果打印到控制台上。
错误处理
使用 async/await 处理并发请求时，需要注意错误处理。如果其中一个请求发生错误，整个并发请求就会中断，Promise.all 返回的 Promise 对象也会抛出异常。为了避免这种情况，可以在每个请求中使用 try/catch 语句来处理异常。
下面是一个错误处理的示例：
----- -------- --------- -
--- -
----- ------- ------ ------ - ----- -------------
---------------------------------------------------- -- -----------------
---------------------------------------------------- -- -----------------
---------------------------------------------------- -- ----------------
---
------------------ ------ -------
- ----- ------- -
---------------------
-
-
----------上面的代码中，在 Promise.all 方法外部使用 try/catch 语句来处理异常。如果发生异常，将异常信息打印到控制台上。
总结
ES7 中的 async/await 语法可以更加简单和直观地处理并发请求。使用 Promise.all 方法可以同时处理多个请求。在每个请求中使用 try/catch 语句可以处理异常。使用 async/await 处理并发请求可以提高代码的可读性和维护性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6610b079d10417a22214e2c1