Promise 是 JavaScript 中解决异步编程问题的一种机制，它可以使代码更具可读性和可维护性。但是，当多个 Promise 嵌套使用时，会形成回调地狱，也就是代码非常难以阅读和调试。ES2017 引入了 async/await 语法糖，使得使用 Promise 更加容易和直观。
什么是 async/await？
async/await 是 ECMAScript 2017 （ES2017）中引入的新特性。async 是一个修饰符，它用于定义一个异步函数，它的返回值是一个 Promise 对象。而 await 则用于等待 Promise 对象的执行结果，只有当异步操作完成时，才会继续往下执行代码。
async/await 的优点是：
- 代码可读性更高：不再需要使用 then() 方法来处理 Promise 对象。
- 错误处理更加方便：可以使用 try/catch 语句处理异步操作中的错误。
- 程序结构更具层次性：没有了回调地狱。
使用 async/await
我们来通过一个小例子来了解如何使用 async/await 特性。
在这个例子中，我们定义了一个 fetchURL() 函数，该函数返回一个 Promise 对象。我们在这里演示了不使用 async/await 的方式，以及使用 async/await 特性的方式。
-- ----------- ------- ---
-------- ------------- -
------ --- ------------------------- ------- -
--------------------- -
----------- - - -------
-- ------
---
-
-- --- -----------
-------- ------ -
----------------------------------
---------------------- -
--------------------
------ ------------------------------------
--
---------------------- -
--------------------
------ ------------------------------------
--
---------------------- -
--------------------
--
-------------------- -
-------------------
---
-
-- -- -----------
----- -------- ------ -
--- -
----- ------- - ----- -----------------------------------
---------------------
----- ------- - ----- ------------------------------------
---------------------
----- ------- - ----- ------------------------------------
---------------------
- ----- ----- -
-------------------
-
-在不使用 async/await 的情况下，我们需要使用 then() 方法将每个 Promise 对象串联起来。而在使用 async/await 的情况下，我们只需要在每个 Promise 对象前面添加一个 await 关键字，JavaScript 引擎会等待 Promise 对象的执行结果，并将结果赋值给一个变量。
错误处理
async/await 在错误处理方面也非常方便。我们可以使用 try/catch 语句来捕获异步操作中的错误。
----- -------- ------ -
--- -
----- ------ - ----- -----------------------------------
--------------------
- ----- ----- -
-------------------
-
-总结
使用 async/await 可以使 Promise 更加容易和直观。它可以让程序结构更具层次性，错误处理更加方便。在编写异步代码时，我们应该优先考虑使用 async/await 语法糖，避免回调地狱的出现。
参考链接
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function
- https://www.runoob.com/w3cnote/async-await.html
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64e3554ef6b2d6eab3ec6717