JavaScript 作为一门单线程语言，其异步编程模型非常重要。在以往，我们使用了回调函数、Promise、Generator 等方式来执行异步编程。而此时，ES7 中的 async 和 await 函数的出现，使得异步编程更加简洁易懂，尤其对于前端开发来说，可以将异步代码变得更加简单易读。
什么是 async 和 await
在 ES7 中，async 和 await 分别是两个关键词，用于解决异步编程问题。async 关键词在函数前面修饰，表示该函数会返回一个 Promise 对象，而 await 关键词则只能出现在 async 函数内部。当 await 关键词后面紧跟着一个 Promise 对象时，该函数会暂停执行，等待 Promise 对象完成，然后返回异步调用的结果。
async 和 await 的优点
使用 async 和 await 的优点主要有以下几个：
- 简洁易懂：使用
async和await可以将异步代码变得更加简单易读。 - 错误处理方便：使用
try...catch可以方便地捕获错误。 - 更好的可维护性：未使用
async和await时，异步代码越多，嵌套层数就越深，而使用async和await可以避免这种情况的发生，使代码更易于理解和维护。
async 和 await 示例
以下是一个使用普通 Promise 的异步代码的示例：
-- -------------------- ---- -------
-------- ------- -
------ --- ----------------- ------- -- -
------------- -- -
----- -- - ------------
------------
-- ------
---
-
-------- --------------- -
------ --- ----------------- ------- -- -
------------- -- -
----- -------- - ------
------------------
-- ------
---
-
-------- -------------------- -
------ --- ----------------- ------- -- -
------------- -- -
----- ------- - -----
-----------------
-- ------
---
-
-------
-------- -- ----------------
-------------- -- ---------------------
------------- -- ------------------------------------------------------------
---------- -- --------------------下面是使用 async 和 await 优化后的代码：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -- - ----- --------
----- -------- - ----- ----------------
----- ------- - ----- ---------------------
------------------------------------------------------------
- ----- ----- -
-------------------
-
-
----------相比较前者，使用 async 和 await 可以实现更为简洁可读的代码，同时错误处理也更加便捷明了。
总结
async 和 await 在现代前端开发中具有重要的作用，能够使异步编程变得简单易读。使用 async 和 await 可以避免过多的嵌套，代码更易于理解和维护，同时错误处理方便明了，因此在实际开发中应尽量充分利用其优势，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64746ca4968c7c53b01cc689