异步操作的问题
在前端开发中，经常会遇到需要执行异步操作的情况。比如，向服务器请求数据、读取本地文件等等。
传统的异步操作方式是使用回调函数或 Promise。回调函数嵌套层级多，代码难以维护和阅读。Promise 虽然解决了回调地狱的问题，但是仍然需要处理 then() 和 catch() 等方法，使得代码显得冗长。
ES9 async/await
ES9 引入了 async/await 语法，提供了一种更加优雅的方式来处理异步操作。
async/await 的主要特点有：
- 只需要使用 try/catch 来捕获异常，避免了回调地狱或 Promise.then() 的处理方式。
- 使用 async 定义的函数将自动返回一个 Promise 对象。
- await 关键字可以等待一个 Promise 执行完成，然后将其结果返回给调用者。
示例代码
下面是一个使用 async/await 的示例代码：
-- -------------------- ---- -------
-- ---------------
----- -------- ------------------- -
--- -
----- -------- - ----- -----------------------------
----- ---- - ----- ----------------
------ -----
- ----- --- -
-----------------
-
-
-- ------
----- -------- --------------------- -
----- -------- - ----- --------------------
----- -------------- - ----- ------------------------------------
----- ---------- - ----- ----------------------
------ -
------------
------- ----------
--
-
-------------------------------- -- -
------------------
---------- -- -
-----------------
---上面的代码中，使用 async 定义了两个异步函数 getUserInfo 和 getUserDetail。getUserDetail 函数调用了 getUserInfo 函数，并且使用 await 等待其结果。然后再获取用户详细信息并组合返回。
代码简洁易读，无需使用 then() 和 catch() 方法，其可读性与同步代码非常接近。
总结
ES9 async/await 是一种优雅的异步操作方式，在代码简洁易读的同时，避免了回调地狱和 Promise.then() 的繁琐书写。在日常前端开发中，推荐使用 async/await 来实现异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a643d48841e98948880d0