在前端开发中，我们经常会遇到需要进行异步操作的情况，比如通过 AJAX 请求获取数据、读取本地文件内容等。而在 ES6 之前，我们通常使用回调函数来处理异步操作的结果。然而，回调函数的嵌套使得代码难以维护和扩展，甚至可能造成一些常见的问题，比如回调地狱、忘记处理错误等。为了解决这些问题，ES6 引入了 async/await，它使得异步操作变得更加简单和直观。
async/await 简介
async/await 是 ES7 中的一个新语法特性，它基于 Promise 实现，使得异步操作和同步操作一样直观，从而使得代码更加易于阅读和理解。async/await 的关键字包括：async、await 和 Promise。
async 用于声明一个异步函数，它可以在函数定义前面加上 async 关键字来指示该函数是一个异步函数。异步函数通过返回一个 Promise 对象来异步完成。
-- -------------------- ---- -------
----- -------- ----------- -
-- --------- ------- --
------ --- ----------------- ------- -- -
-- --------- -------
--------------- ---------
---
-
----------------------- -- -
--------------------
---在上述代码中，我们通过 async 关键字声明了一个异步函数 asyncFunc，它返回一个 Promise 对象。我们可以使用 then 方法来处理该 Promise 对象的结果。
await 用于在异步函数中等待 Promise 对象的解决结果，它必须嵌套在异步函数中使用。当我们使用 await 关键字等待 Promise 对象时，代码会阻塞在此处，直到 Promise 对象被解决或拒绝为止。在等待期间，async 函数可以继续执行其他任务或等待其他 Promise 对象。
-- -------------------- ---- -------
----- -------- ----------- -
-- --------- ------- --
------ --- ----------------- ------- -- -
------------- -- -
-- --------- -------
--------------- ---------
-- ------
---
-
----- -------- --------------- -
-- -- --------- --
----- ------ - ----- ------------
--------------------
-
----------------在上述代码中，我们通过 async 关键字声明了一个异步函数 asyncFunc，它返回一个 Promise 对象。在函数 testAsyncFunc 中，我们使用 await 关键字等待异步函数 asyncFunc 的解决结果，该操作会阻塞代码执行 1 秒钟，并在异步操作成功后打印结果。
示例代码
现在，我们来看一个完整的示例代码，它演示了如何使用 async/await 实现一个获取用户个人信息的异步操作：
-- -------------------- ---- -------
----- ----------- - ----- -- -- -
--- -
-- ------
----- -------- - ----- --------------------------
----- ---- - ----- ----------------
-- --------
----- -------------- - ----- -------------------------------------------
----- ---------- - ----- ----------------------
-- --------
------------------------
- ----- ------- -
---------------------
-
--
--------------在上述代码中，我们使用 async/await 实现了一个异步操作 getUserInfo，该操作通过 fetch 调用 API 接口获取用户信息，并通过 fetch 调用另一个接口获取用户详细信息。其中，我们使用了 try-catch 语句来捕获异步操作的错误，并打印错误信息。
总结
async/await 是 ES6 中一个非常重要和实用的特性，它使得异步操作和同步操作一样直观，从而使得代码更加易于阅读和理解。使用 async/await 可以有效地解决回调函数嵌套、回调地狱以及错误处理等问题。在实际项目中，我们可以使用 async/await 来简化异步代码的编写和调试，从而大大提高代码的质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64615321968c7c53b02c025c