在前端开发中，异步编程是一个非常常见的需求。尤其在处理 Ajax 请求，读取文件等等方面，异步编程几乎是必不可少的。JavaScript 提供了多种方式来实现异步编程，其中 callback、Promise 以及 async/await 是比较常用的。
ES6 引入了 async/await 语法，使得异步编程更加便捷、更加优雅，也更加易于理解和维护。接下来我们将一步步学习 ES6 中的 async/await，并掌握如何利用它更加优雅地解决异步编程问题。
什么是 async/await
async/await 是对 Promise 的一种更加高级、更加优雅的封装。它们可以使异步代码看起来像同步代码，使得代码更加清晰、易于理解。
async/await 是 ES7 中提出的新特性，但是由于 ES7 尚未正式发布，因此我们需要使用 Babel 或者 TypeScript 等工具来编译代码。在实际开发中，async/await 已经被广泛地使用，成为了异步编程的首选方式之一。
使用 async/await
使用 async/await 首先需要理解两个关键的关键词：async 和 await。
async
async 声明一个函数为异步函数。我们把异步函数称之为“卡住的函数”，意思是函数在执行到异步操作时会暂停，等待异步操作执行完毕之后继续执行。async 异步函数返回的是一个 Promise 对象。
async function fetchUser() {...}await
await 关键词只能在 async 函数的内部使用。它可以等待 Promise 对象执行完成，并返回 Promise 对象的执行结果。如果 Promise 对象出现错误，await 会抛出错误，因此我们需要使用 try...catch 语句来捕获这些错误。
await 基本用法
const result = await fetch(url); console.log(result);
上面的代码中我们使用 fetch 函数请求一个 URL，await 关键词用来等待请求结束。fetch 返回的是一个 Promise 对象，因此我们可以通过 await 关键词拿到 Promise 对象的结果 result。
await 编写错误处理
try {
const result = await fetch(url);
console.log(result);
} catch (e) {
console.error(e);
}如代码所示，await 关键字可能会抛出错误，在异步函数外要使用 try...catch 语句进行错误捕获。
async/await 完整示例
-- -------------------- ---- -------
-- ------------- ---
----- -------- ------------- -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
- ----- --- -
-----------------
-
-
-- ------
---------------------------------------------
---------- -- ------------------
------------ -- ----------------------上面的代码中，我们定义了一个异步函数 fetchUrl，该函数请求一个 URL，然后返回 URL 响应中的 JSON 数据。
在 fetchUrl 函数内我们使用了 await 关键词等待 URL 响应结束，并从响应中获取 JSON 数据。异步函数返回响应 JSON 数据，如果发生错误，我们使用 try...catch 语句进行捕获。在异步函数外，在调用 fetchUrl 函数时，我们使用了 then 和 catch 方法对异步操作进行处理。
async/await 的优势
async/await 语法的出现，使得异步编程不再需要嵌套过多的回调函数，通过简单的 try...catch 语句即可实现错误捕获。与其他异步编程语法相比，async/await 更加直观，易于理解和维护。
其次，async/await 可以使得异步代码更加清晰明了。使用 callback 和 Promise 实现异步代码时，因为回调函数的嵌套，程序的执行顺序往往不够直观。而 async/await 可以使用类似同步程序的顺序编写异步代码，程序读起来更加清晰，便于后来的维护和修改。
总结
在本文中，我们学习了 ES6 中的一个重要特性 async/await 并通过示例代码详细了解了它的用法。async/await 可以帮助我们更加优雅地解决异步编程问题，使代码更加清晰、易于理解和维护。了解并掌握 async/await，将有助于我们在以后的工作中更加便捷地完成异步编程任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488304f48841e98946b1bd0