随着前端应用的不断发展，对于网络请求的要求也越来越高。传统的 Callback、Promise 在处理多个异步请求的时候，代码很容易变得逻辑混乱和嵌套太多的问题。ES8 中的 Async/Await 则提供了更加简洁的处理异步请求的方式，优雅的解决了这个问题。
Async/Await 简介
Async/Await 是 ES8 的一项新特性，它是基于 Promise 的一种更加高级的语法糖。它的主要作用是简化 Promise 的调用方式，通过更加直观的方式来处理异步请求，同时使得代码更加自然易读。
Async/Await 的实现依赖于 Generator。Generator 通过 yield 关键字实现了暂停和恢复函数的能力，而 Async/Await 则通过将 Generator 和 Promise 结合实现了更加强大和直观的异步处理方式。
Async/Await 的用法
在介绍 Async/Await 的具体用法之前，先来看一个使用 Promise 处理异步请求的例子：
function getUsers() {
return fetch('/api/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
}
getUsers();上面的代码中，使用了 Promise 的 then 和 catch 方法来处理请求成功和失败的情况。下面是使用 Async/Await 重写上面的代码：
-- -------------------- ---- -------
----- -------- ---------- -
--- -
----- -------- - ----- --------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-
-----------可以看到，使用 Async/Await 可以更加直接和自然地处理 Promise，代码也更加清晰易懂。下面是对使用 Async/Await 的一些说明：
async
async 是声明一个函数是异步的关键字，函数内的 await 关键字只能在 async 函数中使用。
await
await 关键字用于挂起异步函数的执行，直到 Promise 对象执行完成并返回结果。在使用 await 的时候，它后面的 Promise 对象必须要有返回值，否则会报错。
try/catch
在使用 Async/Await 时，最好使用 try/catch 来捕获异步操作中的异常，以便及时处理。
Async/Await 示例
下面是一个完整的使用 Async/Await 的示例，它演示了如何使用 Async/Await 发送请求并获取数据：
-- -------------------- ---- -------
----- -------- ---------- -
--- -
----- -------- - ----- --------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-
-----------上面的代码中，我们先声明了一个异步函数 getUsers()，然后使用 try/catch 捕获异步操作中的异常。在函数内使用 fetch() 方法异步请求数据，并在请求成功后使用 await 关键字获取数据，并将其打印到控制台上。
总结
使用 Async/Await 可以更加直接简洁地处理异步请求。在使用 Async/Await 的时候，要注意其中的细节和规范，尤其是 await 关键字只能在 async 函数中使用，而且需要使用 try/catch 来捕获异常。如果你想要提高自己的前端开发技能，那么建议你深入学习 Async/Await，并应用到实际项目中，一定会有不错的收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6466e580968c7c53b074f156