在现代的前端开发中，异步编程已经成为了必不可少的一部分。JavaScript 作为一门单线程语言，异步编程主要通过回调函数、Promise 和 Generator 等方式来实现。然而，这些方式都存在一些问题，例如回调地狱、Promise 的 then() 方法嵌套过多等等。ES8 引入的 async/await 语法解决了这些问题，使得异步编程变得更加简洁、易读、易维护。本文将详细介绍 async/await 的语法和使用方法，并结合示例代码进行讲解。
什么是 async/await
async/await 实际上是 Generator 和 Promise 的语法糖。async 声明的函数会返回一个 Promise 对象，而在 async 函数内部可以使用 await 关键字来等待 Promise 对象的状态变化。使用 async/await 可以让异步代码看起来像同步代码，使得代码结构更加清晰、易读。下面是一个简单的示例：
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
getData().then(data => console.log(data));上述代码中，我们使用了 async 声明了一个异步函数 getData()，该函数内部使用了 await 关键字来等待 Promise 对象的状态变化。具体来说，我们使用 fetch() 方法获取数据，fetch() 方法返回的是一个 Promise 对象，我们可以使用 await 等待 Promise 对象的状态变化，等到 Promise 对象的状态变为 resolved 时，我们可以通过 response.json() 方法获取到数据，并将数据返回。最后，我们通过调用 getData() 方法并使用 then() 方法来获取数据并输出到控制台。
async/await 的优点
相比于 Promise 和 Generator，async/await 有以下优点：
代码更加简洁、易读：使用 async/await 可以让异步代码看起来像同步代码，使得代码结构更加清晰、易读。
避免回调地狱：使用 async/await 可以避免回调地狱，使得代码更加易维护。
错误处理更加方便：使用 try/catch 语句可以方便地捕获异步代码中的错误。
async/await 的语法
async/await 的语法非常简单，只需要在异步函数前面加上 async 关键字，然后在需要等待 Promise 对象的地方使用 await 关键字即可。下面是一个示例：
async function myAsyncFunction() {
const result = await myPromiseFunction();
console.log(result);
}在上述代码中，我们使用 async 声明了一个异步函数 myAsyncFunction()，在该函数内部使用了 await 关键字来等待 Promise 对象的状态变化。具体来说，我们使用了 myPromiseFunction() 方法获取数据，该方法返回的是一个 Promise 对象，我们可以使用 await 等待 Promise 对象的状态变化，等到 Promise 对象的状态变为 resolved 时，我们可以通过 result 变量获取到数据，并将数据输出到控制台。
async/await 的示例
下面是一个使用 async/await 的示例，该示例通过调用 GitHub API 获取用户信息：
-- -------------------- ---- -------
----- -------- --------------------- -
--- -
----- -------- - ----- --------------------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-
-------------------------------- -- -------------------在上述示例中，我们使用 async 声明了一个异步函数 getUserInfo()，该函数接受一个参数 username，用于指定要获取的用户信息。在该函数内部，我们使用 try/catch 语句来捕获异步代码中的错误。具体来说，我们使用 fetch() 方法获取数据，fetch() 方法返回的是一个 Promise 对象，我们可以使用 await 等待 Promise 对象的状态变化，等到 Promise 对象的状态变为 resolved 时，我们可以通过 response.json() 方法获取到数据，并将数据返回。最后，我们通过调用 getUserInfo() 方法并使用 then() 方法来获取数据并输出到控制台。
总结
async/await 是 ES8 引入的一种异步编程方式，可以让异步代码看起来像同步代码，使得代码结构更加清晰、易读。相比于 Promise 和 Generator，async/await 有许多优点，例如避免回调地狱、错误处理更加方便等等。在实际开发中，我们可以使用 async/await 来简化异步代码，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66068e96d10417a2224deaea