今天的前端开发离不开异步操作，但是异步代码往往比同步代码复杂难懂，所以 ES9 引入了 async/await 语法来简化异步代码。本文将介绍 async/await 的使用方法和优势，并通过实例说明。
async/await 是什么？
async/await 是 ES9 中新增的一种语法糖，它使得异步代码看起来和同步代码一样简单易懂。通过 async/await，我们可以用同步的方式编写异步代码。
async/await 依赖于 Promise，而 Promise 是 ES6 中引入的一个对象，它能够更好地解决回调嵌套过深的问题。
async/await 的使用方法
async/await 是通过把异步代码转换成同步的方式来实现的，因此我们需要在异步操作前加上 async 关键字。async 函数会返回一个 Promise 对象，我们可以通过 await 关键字来等待 Promise 对象的状态改变。
await 关键字可以等待 Promise 对象被 resolved 或 rejected，它会暂停程序执行，直到 Promise 对象状态变为 resolved 或 rejected。
下面是 async/await 的使用方法：
async function foo() {
// 异步操作
let result = await promiseObject;
// 执行其他操作
return result;
}在上面的示例中，我们使用 async 定义一个异步函数 foo，在函数体中使用 await 等待 Promise 对象状态改变，并返回 Promise 对象的结果。
async/await 的优势
async/await 语法的优势很明显：
- 简洁明了：async/await 语法能够让我们用同步的方式编写异步代码，从而使得代码更加简洁明了，易于维护和理解。
- 错误处理：使用 try...catch 结构可以轻松处理 Promise 中的错误，从而避免回调地狱和猫头鹰式代码。
- 可读性强：async/await 语法具有可读性强的特点，使得代码更加易读易懂。
异步代码示例
下面是一个异步代码示例，使用 async/await 语法：
-- -------------------- ---- -------
----- -------- -------------------- -
--- -
--- ------ - ----- --------------------------------------------------------------------------------------------------
--- ---- - ----- --------------
-- ----
--- ----------- - ----------------------------
--- ----------- - ---------------
--- --------- - ---------------------
------ -
----- -----
-------- ------------
------------ ----------- - -------
---------- --------- - ------
-
- ----- ------- -
---------------------
-
-在上面的示例中，我们通过 async/await 实现了对天气 API 的异步调用，并对 API 返回的数据进行解析和处理。通过 try...catch 结构，我们可以轻松地处理异步代码中的错误情况。
总结
async/await 语法使得异步代码更加简单易懂，易于维护和理解。通过示例代码，我们了解了 async/await 的使用方法和优势。
在实际开发中，我们应该充分利用 async/await 语法，使得我们的代码更加简洁明了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a156395b1f8cacd21dad2