在前端开发中，异步函数是非常常见的，因为其可以帮助我们在页面加载过程中异步地请求数据，提高用户体验。在ES7中，JavaScript引入了 async/await等新的异步函数语法，使得我们更加方便地处理异步问题。
什么是 async/await
async/await是一种基于Promise的异步处理方式，它的主要目的是简化异步代码的书写和处理。在使用 async/await之前，我们需要了解Promise。
Promise
Promise 是 ES6 中新增的异步编程解决方案，其本质是将回调函数的嵌套改为链式调用，在代码结构层面上更加清晰明了。Promise 对象主要有三个状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。
Promise 对象的语法如下：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ----
-- --- ------ --- -
---------------- -- -- --------- --
- ---- -
-------------- -- -- -------- --
-
---
------------------- -- -
-- -------
-------------- -- -
-- -------
---async/await
async 函数定义异步函数，它会返回 Promise 对象。在函数中，我们可以使用 await 关键字等待 Promise 对象解决，并接收 Promise 对象的结果。当 Promise 对象处于 rejected 状态时，async 函数会通过 throw 语句抛出异常，因此我们可以使用 try...catch 语句捕获异常。
使用 async/await 的语法如下：
async function asyncFunction() {
try {
const result = await promise;
// 处理异步操作成功的结果
} catch (error) {
// 处理异步操作失败的结果
}
}值得注意的是，async/await 的使用需要配合 try...catch 语句，以尽可能地保证代码的健壮性。
async/await 示例
假设我们需要向服务器请求数据，我们可以通过以下两种方式来实现：
Promise
-- -------------------- ---- -------
-------- --------- -
------ --- ----------------- ------- -- -
-----
------------------------------------
-------------- -- -
-----------------------
--
------------ -- -
--------------
---
---
-
---------
---------- -- -
------------------
--
------------ -- -
---------------------
---async/await
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -------- - ----- ------------------------------------------
---------------------------
- ----- ------- -
---------------------
-
-
----------从代码量上来看，使用 async/await 可以使得代码更加简洁明了，并且避免了 Promise 的嵌套调用。
总结
async/await 的出现大大简化了 JavaScript 中异步代码的处理，使得代码看起来更简洁，易于维护，提高了代码的可读性。在使用 async/await 时，需要注意 try...catch 语句的作用，以便更好地保证代码的健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b61b64add4f0e0ffecc596