在前端开发中，异步编程是一种常见的编程方式。JavaScript 中的异步编程主要依靠回调函数、Promise，以及生成器等方式。然而，这些方式都有各自的缺点，比如回调地狱、then 方法的链式调用过长、生成器需要额外的控制流等等。为了解决这些问题，ES7 中引入了 async/await。
async/await 简介
async/await 是 ES7 中的两个新关键字，它们可以使异步代码的书写方式更加清晰明了，同时避免了回调地狱和 then 方法的链式调用过长。async 函数代表一个异步函数，可以在其中使用 await 关键字等待异步操作完成。await 会阻塞代码执行，直到异步操作完成。在 async 函数中，可以像同步代码一样使用 return 返回值。
async/await 的优点
使用 async/await 有以下几个优点：
- 简化异步代码的书写，避免回调地狱和 then 方法的链式调用过长；
- 易于理解和维护，代码可读性高；
- 可以方便地处理异步操作的结果，使用 try...catch 捕获异常。
示例代码
下面是一段使用 async/await 处理异步操作的示例代码：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-
----------在上面的示例代码中，fetch 返回的是一个 Promise 对象，使用 await 等待 fetch 成功返回数据，然后使用 await 将数据转换成 json，最后打印数据。如果出现异常，将异常捕获并打印错误信息。
async/await 与 Promise 的区别
async/await 与 Promise 都是用来处理异步操作的，它们之间的区别在于 Promise 是一种异步编程的规范，而 async/await 是 Promise 的语法糖，是 Promise 更高层次的抽象。
在使用 Promise 时，需要使用 then 方法来处理 Promise 返回的结果，而在使用 async/await 时，可以像处理同步操作一样使用 await 等待异步操作完成，并直接返回操作结果。async/await 更加易于理解和维护。
总结
async/await 是 ES7 中新添加的关键字，用于解决 JavaScript 异步编程中的问题。它可以简化异步代码的书写，易于理解和维护，代码可读性高。在使用 async/await 时，需要注意使用 try...catch 处理异常。async/await 是 Promise 更高层次的抽象，可以更方便地处理异步操作的结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e98ff48841e9894e4b246